Question

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

请注意，我正在Chrome（测试频道）上对此进行测试。代码如下。

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>

Answer 1

这是因为white-space在html中崩溃的方式。

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

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

JS Fiddle demo

你也可以在div s：

之间发表评论

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

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

JS Fiddle demo

甚至可以为font-size元素设置body为零（但是你必须为子元素重新定义它，显然：

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

JS Fiddle demo

Answer 2

Chrome中出现奇怪inline-block行为的另一种可能性是，如果您设置了text-render: optimizeLegibility。我在Chrome中的内联块元素中遇到了无法解释的换行符，并发现删除text-render: optimizeLegibility解决了问题。

我至少有one other难以弄清楚的问题（令人费解的网页字体无法渲染），原来是由optimizeLegibility造成的，所以从现在开始，当Chrome中的内容出现异常时，这将成为主要的嫌疑人。

（nb。即使你不认为你正在使用它，如果你正在使用像Twitter Bootstrap这样的框架，你可能会在不知情的情况下使用它）

Answer 3

这是你身体的边缘：

margin: 4px;

因为边距是总宽度的一部分。第一个300px +第二个100px + 8px（两侧各4个），保证金= 408px。这迫使第二个div下降到下一行。

我真的很惊讶它在96处起作用。它的作用就像它只是一方面的余量。我希望它只能在92或以下工作。无论哪种方式都可以考虑身体宽度的边距大小，或者将边距设置为0，这样可以解决问题。

因为看似没有理由，内联块元素是换行符？

3 个答案: