带有"white-space:normal"的内联块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/(如果问题没有立即出现,请更改文本的长度).

我知道我可以用一张桌子来解决它,并且左边的孩子可能有浮动,右边有"溢出:隐藏",但我认为没有理由不这样做.

任何人都可以提供一些见解吗？我很想知道盒子模型中的内容会导致这种行为.谢谢!

Answer 1

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

好吧，如果您仍然需要修复，您可以添加width第二个孩子以使其适合内部container。

小提琴

例如

.child2
{
    width: 70%;
}