CSS div布局 常见问题2 换行
1 原计划目标
外部div1宽度300px；
内部3个子div：通过display:inline-block（不换行）设置成3列；每个宽度100px。
所有div的box-sizing设为border-box。
2 实际结果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>html 布局问题2 换行 | 关关教程</title>
<style>
*{
box-sizing: border-box;
}
#div1{
width: 300px;
}
#div1>div{
display: inline-block;
width:100px;
height: 50px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<div id="div1">
<div >第1列</div>
<div >第2列</div>
<div >第3列</div>
</div>
</body>
</html>
下拉查看答案。
3 分析
当没有使用浮动时，HTML代码里的换行，会被解析成空格。
第1列与第2列之间有一个明显的空格
4 解决方法1
HTML代码的三个子div删除其中换行。
<div id="div1">
<div >第1列</div><div >第2列</div><div >第3列</div>
</div>
这个方法并不现实，所有代码写在一行，代码可读行差到极点。
这也是为什么我们项目里大量使用float的原因，避免类似这种代码，代码里的换行解析成HTML空隔，从而引起距离不能精确控制到每1个像素（px）。
5 解决方法2
3个子div使用左浮，浮动会忽略代码里的换行。