html – 内联块元素是看似没有理由的断行?

我有一些非常基本的 HTML / CSS无法正常工作.基本上我的身体设置为400px宽.然后我在身体内部有两个div,显示宽度为300px和100px.此外,这两个div都设置为显示:inline-block.出于某种原因,100px div会突破身体的内容区域并显示在其下方.我不知道为什么会这样.如果我将宽度从100px设置为96px,则可以正常工作.但是,如果我将其设置为97px,98px,99px或返回100px,则无效.我发现这种行为很奇怪.有人可以解释出了什么问题吗?

请注意,我正在Chrome(Beta频道)上对此进行测试.代码如下.

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>
这是因为html中白色空间崩溃的方式.

如果从两个div元素之间删除换行符,一切都很好:

<div class="list-container">
</div><div class="button-container">
</div>

JS Fiddle demo.

你也可以只注释掉div之间:

<div class="list-container">
</div><!--

--><div class="button-container">
</div>

JS Fiddle demo.

或者甚至将body-size的font-size设置为零(但是你必须为子元素重新定义它,显然:

body {
    margin: 4px;
    width: 400px;
    height: 250px;
    border: 1px solid black;
    padding: 0;
    font-size: 0;
}

JS Fiddle demo.

相关文章
相关标签/搜索