html - 当我将更多文本添加到子 DIV 元素时收缩换行符

Question

HTML代码:

<div id="container">
    <div id="first">
        foo bar baz foo bar baz
        foo bar baz foo bar baz
    </div>
    <div id="second">
        Foo
    </div>
    <div id="third">
        foo bar baz foo bar baz
        foo bar baz foo bar baz
    </div>
</div>

CSS 代码:

body {
    text-align: center;
}
#container {
    display: inline-block;
    background: lightcyan;
}
#first {
    display: inline-block;
    background: lightgreen;
}
#second {
    background: orange;
}
#third {
    width: 30%;
    display: inline-block;
    background: lightblue;
}

我试图确保整个 div#container 收缩包装在 div#first 周围。上面的代码按预期工作。请参阅此演示:http://jsfiddle.net/HhrE6/

但是，当我在 div#third 中添加更多文本时，收缩包装中断。查看损坏的演示:http://jsfiddle.net/n4Kn2/

1. 为什么会这样？
2. 如何防止这种情况发生？

Answer 1

在此示例中，容器的宽度取决于内容的宽度，而内容的宽度又取决于容器的宽度。这就是渲染器在计算 #container 的宽度时无法考虑 #third block 的实际宽度的原因。

根据 CSS 规范，the width of an inline block计算为

min(max(preferred minimum width, available width), preferred width).

计算首选宽度的地方

by formatting the content without breaking lines other than where explicit line breaks occur

所以容器的宽度成为#third block 的宽度(作为最宽的一个)如果它的内容没有任何换行符，然后是的实际宽度>#third block 设置为该宽度的 30%。