如何使div自动宽到足以容纳漂浮的孩子？

Question

如何使div自动宽到足以容纳漂浮的孩子？

<div class="Parent"> <!-- 3 Children, should be 450px wide-->
  <div class="Child"></div>
  <div class="Child"></div>
  <div class="Child"></div>
</div>
<div class="Parent"> <!-- 2 children, should be 300px wide-->
  <div class="Child"></div>
  <div class="Child"></div>
</div>

Child divs都是"float:left",具有固定的宽度.如何让Parent div等于浮动子的宽度？每个父母中的孩子数量各不相同,但未知,但孩子们必须连续排队,而不必换行.

示例:如果所有三个子项都是150px,则父项应该变为450px,以便没有子项包装.如果有两个150px的孩子,父母应该变成300px.

更新:

"小提琴"非常酷.这是一个问题的演示:http: //jsfiddle.net/AG3c9/6/

当您将鼠标悬停在动物身上时,您可以看到鸟类,爬行动物和鱼类堆叠在一起.它们应该并排显示.

这就是我想要的样子:http: //jsfiddle.net/AG3c9/8/

我通过强制父级为固定宽度得到它.但是父母需要根据孩子的不同而不同而不是固定的宽度.

Answer 1

浮动.Parent divs:

现场演示

我的测试CSS:

.Parent {
    float: left;
    background: #ccc;

    margin: 0 0 16px 0;
    clear: both
}
.Child {
    float: left;
    width: 150px;
    height: 50px;
}

当你没有float: left父div 时会发生这种情况:

http://jsfiddle.net/thirtydot/AG3c9/1/