Question

HTML code：

<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＃容器收缩包装div＃first。上面的代码按预期工作。请参阅此演示：http://jsfiddle.net/HhrE6/

然而，当我在div＃third中添加更多文本时，收缩包装会中断。请参阅破解的演示：http://jsfiddle.net/n4Kn2/

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

Answer 1

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

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

min（最大（首选最小宽度，可用宽度），首选宽度）。

计算首选宽度

通过格式化内容而不破坏行而不是在哪里发生显式换行

因此，如果其内容布局没有任何换行符，那么容器的宽度将成为#third块的宽度（作为最宽的块），然后是#third块的实际宽度设置为此宽度的30％。

当我向子DIV元素添加更多文本时，收缩包装中断

1 个答案: