Question

我有这个HTML：

<div id="d0">
<div id="d1">Hello</div>
<div id="d2">some text here that could wrap but is not being wrapped</div>
</div>

和这个css：

#d0 {
    white-space: nowrap;
}
#d0 > * {
    white-space: normal;
    display:inline-block;
}
#d1 {
    width:300px;
    background-color: #ff0;
}
#d2 {
    background-color: #aaf;
}

小提琴：http://jsfiddle.net/yH8sC/1/

如果我调整窗口（或结果区域）的大小以使整个事物不适合一行，我希望d2能够换行。但是，它表现得好像d1不存在 - d2仅在没有足够空间在一行上单独显示d2 时包装。我用Chromium和Firefox测试过。

为什么会发生这种情况？如何更改行为？

注意：我在nowrap上使用d0因为我不希望将d2推到d1以下。但我仍然希望内容可以包装。

Answer 1

如果我理解你要完成的任务，请尝试将float：left应用于＃d1。它将其转换为内联元素。它后面的元素（＃d2）将填满＃d1留下的任何空间。在这种情况下，由于它是一个流体元素，文本将会换行。 http://jsfiddle.net/K2XRe/

#d0 {}
#d1 {
    width:300px;
    background-color: #ff0;
    float: left;
}
#d2 {
    background-color: #aaf;
}

Answer 2

我找到的一个解决方案是使用display: table-cell代替display: inline-block 它可能没有得到广泛的支持，但它现在应该仍适用于大多数浏览器。另一种方法是使用实际的表格：）

Div元素滚动而不是包装

2 个答案: