子 div 没有包裹以留在父级内部

Question

看看这个小提琴。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 可能看起来像这样：

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

希望这可以帮助！！！

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

请参阅此处： http: //jsfiddle.net/K2xn5/

如果您希望 div在 divtwo内换行parent，则没有必要为 .div 附加固定宽度parent。相反，您需要为名为 的 div 提供固定宽度two。然后，这将占据内容所定义的空间。然后，您的parentdiv 将根据其子级（在本例中为 divone和）的大小继续扩展two。

看看这些小提琴：

子级固定宽度，父级没有宽度： http://jsfiddle.net/K2xn5/1/

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

希望这可以帮助！！！