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

在此示例中，容器的宽度取决于内容的宽度，而内容的宽度又取决于容器的宽度。这就是为什么渲染器#third在计算#container.

根据 CSS 规范，内联块的宽度计算为

min(max(首选最小宽度，可用宽度)，首选宽度)。

计算首选宽度的位置

通过格式化内容而不换行，除非出现明确的换行符

所以容器的宽度#third如果它的内容没有任何换行符就变成了块的宽度（作为最宽的），然后#third块的实际宽度设置为这个宽度的30%。