Question

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中包裹了。这被揭示了＃39;当您向名为two的子div中添加一个小宽度时。

在此处查看：http://jsfiddle.net/K2xn5/

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

查看这些小提琴：

固定儿童宽度，父母没有宽度：http://jsfiddle.net/K2xn5/1/

子div基于其内容的大小包装自身：http://jsfiddle.net/K2xn5/2/和http://jsfiddle.net/K2xn5/3/

希望这有帮助!!!

Answer 2

在我看来，两个孩子的div都被正确包裹了？它们都在灰色的150px父盒内。

BTW这个简短的教程帮助了我很多CSS学习。

http://www.barelyfitz.com/screencast/html-training/css/positioning/

儿童没有包装留在父母内部

2 个答案: