我有一些非常基本的 HTML/CSS，但没有按我的预期工作。基本上我的身体设置为 400 像素宽。然后，我在 body 内有两个 div，其显式宽度分别为 300px 和 100px。此外，这两个 div 都设置为display: inline-block。由于某种原因，100px div 超出了正文的内容区域并显示在其下方。我不知道为什么会发生这种情况。如果我将宽度从 100px 设置为 96px，它就可以工作。但是，如果我将其设置为 97px、98px、99px 或重新设置为 100px，则不起作用。我觉得这种行为很奇怪。有人可以解释出了什么问题吗？
请注意，我正在 Chrome（Beta 通道）上对此进行测试。代码如下。
The CSS:
body {
margin: 4px;
width: 400px;
height: 250px;
border: 1px solid black;
}
.list-container {
display: inline-block;
width: 300px;
height: 100%;
background-color: red;
}
.button-container {
display: inline-block;
width: 100px;
height: 100%;
background-color: blue;
}
HTML：
<body>
<div class="list-container">
</div>
<div class="button-container">
</div>
</body>
正是因为这样的方式white-space在 html 中折叠。
如果删除两者之间的换行符div元素，一切都很好：
<div class="list-container">
</div><div class="button-container">
</div>
JS 小提琴演示 http://jsfiddle.net/davidThomas/tcqYp/.
您也可以直接注释掉之间的内容divs:
<div class="list-container">
</div><!--
--><div class="button-container">
</div>
JS 小提琴演示 http://jsfiddle.net/davidThomas/tcqYp/1/.
或者甚至设置font-size为零为body元素（但显然，您必须为子元素重新定义它：
body {
margin: 4px;
width: 400px;
height: 250px;
border: 1px solid black;
padding: 0;
font-size: 0;
}
JS 小提琴演示 http://jsfiddle.net/davidThomas/tcqYp/3/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
