html - 具有 "white-space: normal"的内联 block div 超出具有 "white-space: nowrap"的父级的宽度

Question

我试图将几个元素排成一行，以便它们都适合容器的宽度。为了防止它们自动换行，我向父级添加了“white-space: nowrap”，并向子级添加了“white-space: normal”以允许它们对文本进行换行(根据需要)。

问题是，使用这种配置，最右边的子节点有时会超过父节点的宽度。

HTML:

<div id="container">
    <div class="child">
        child 1
    </div>
    <div class="child">
        child 2 text that might be long enough to wrap, but still exceed the parent
    </div>
</div>

CSS:

#container {
    white-space: nowrap;
    width: 200px;
    background: yellow;
    border: 1px solid brown;
    padding: 5px;
}

.child {
    display: inline-block;
    border: 2px solid red;
    vertical-align: top;
    white-space: normal;
}

http://jsfiddle.net/7e5TU/1/ (如果问题没有立即出现，请更改文本的长度)。

我知道我可以用一个表来解决它，并且可能在左边的 child 上有一个 float ，在右边有一个“溢出:隐藏”，但我看不出为什么这不起作用。

谁能提供一些见解？我最想了解盒子模型中的什么导致了这种行为。谢谢!

Answer 1

我同意@hashem 那是预期的行为。通过对父级使用 white-space: nowrap;，您已经折叠了 inline(-block) 元素之间的空白。 white-space 处理子元素，而不是元素本身。

好吧，如果您仍然需要修复，您可以将 width 添加到第二个 child 以使其适合 container。

fiddle

例如

.child2
{
    width: 70%;
}