如何使div自动地宽到足以容纳其漂浮的孩子？ [英] How do I make a div automatically wide enough to accommodate its floating children?

问题描述

如何使div自动地足够宽以适应其浮动的孩子？

How do I make a div automatically wide enough to accomodate its floating children?

<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>

子div都是float：left我如何使父div等于它的漂浮孩子的宽度？每个父项中的子项数量各不相同，且未知，但子项必须连续排列，而不会换行。

The Child divs are all "float:left" with fixed widths. How do I make the Parent div be equal to the width of it's floating children? The number of children in each parent varies and is unknown but the children must line up in a row, without wrapping to a new line.

示例：如果所有三个子项150px，父级应该变为450px，以便没有子包裹。如果有两个150px的子项，则父项应为300像素。

Example: If all three children are 150px, the parent should become 450px so that none of the children wrap. If there are two 150px children, the parent should become 300px.

UPDATE：

小提琴是很酷。这是一个问题的演示：
http://jsfiddle.net/AG3c9/6/

"Fiddle" is pretty cool. Here's a demo of the problem: http://jsfiddle.net/AG3c9/6/

当您将鼠标悬停在动物上时，您可以看到鸟类，爬行动物和鱼类堆叠在一起。

When you hover over animals, you can see that birds, reptiles and fish are stacked on top of each other. They should show side by side.

这是我想让它看起来像：
http://jsfiddle.net/AG3c9/8/

This is what I want it to look like: http://jsfiddle.net/AG3c9/8/

我得到它，通过强制父固定宽度。

I got it by forcing the parent to be a fixed width. But the parent needs to vary based on it's children and not be a fixed width.

推荐答案

浮动 .Parent div s：

现场演示

strong>我的测试CSS：

My Test 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/

这篇关于如何使div自动地宽到足以容纳其漂浮的孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！