html - 子 div 不包装以留在父级中

Question

看看这个 fiddle 。 http://jsfiddle.net/mstwp/

html 是:

<div id="parent" style="width: 150px; display: inline-block; white-space: nowrap">

    <div id="one" class="kids">
        <span>Hi</span>
    </div>

    <div id="two" class="kids">
        <span>Bob like to play on his violin</span>
    </div>

</div>

使用 CSS:

#parent {
    background-color: #aaaaaa
}
#one {
    background-color: #ff0000
}

#two {
    background-color: #00ff00
}

.kids {
    display: inline-block;
    padding: 2px;
    white-space: normal;
}

如何让 div #two 更早地换行，以便我可以将两个子 div 保留在父 div 中？

Answer 1

只需删除附加到父级的宽度。它强制父 div 增加其高度以容纳 div #two 中的内容。所以保持父 div 不变:

<div id="parent" style="display: inline-block; white-space: nowrap">

这应该可以解决问题。

或者，您可以向父级 div 添加一个最小高度，以便它根据其子级中的内容自动调整其宽度。所以你的父 div 可能看起来像这样:

<div id="parent" style="min-width: 150px; display: inline-block; white-space: nowrap">

希望这有帮助!!!

编辑:您的子 div 已经包含在父 div 中。当您向名为 two 的子 div 之一添加小宽度时，就会“显示”这一点。

请看这里:http://jsfiddle.net/K2xn5/

如果您希望 div two 包含在 parent div 中，那么将固定宽度附加到 parent 是没有意义的。相反，您需要为名为 two 的 div 提供固定宽度。这将占用内容定义的空间。然后，您的 parent div 将根据其子 div 的大小不断扩展，在本例中为 div one 和 two。

检查这些 fiddle :

固定宽度给 child ，没有宽度给 parent :http://jsfiddle.net/K2xn5/1/

子 div 根据其内容的大小进行 self 包装:http://jsfiddle.net/K2xn5/2/和 http://jsfiddle.net/K2xn5/3/

希望这有帮助!!!