如何让div自动宽度足以容纳其漂浮的孩子？

如何让自动宽度足以容纳其漂浮的孩子？如何让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”。我如何让父div等于它的漂浮儿童的宽度？每个家长的孩子数量各不相同，但未知，但孩子们必须连续排队，而不必换行。

示例：如果所有三个孩子都是150像素，父级应该变为450像素，以便所有孩子都不包装。如果有两个150px的孩子，父母应该变成300px。

UPDATE：

“小提琴” 是很酷。下面是该问题的演示： http://jsfiddle.net/AG3c9/6/

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

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

我迫使父母是一个固定的宽度得到了它。但是父母需要根据孩子的不同而变化，而不是固定的宽度。

来源

2011-03-20 Nick

那么现在发生了什么？他们是否换到新的行？你在Parent上试过'width：auto'吗？ – moe 2011-03-20 06:12:40

请参阅更新。 – Nick 2011-03-20 07:38:37

你在测试什么浏览器？即时通讯使用Chrome和你粘贴的两个链接工作相同。鸟类，爬行动物和鱼类彼此相邻，而不在另一个之上。 – moe 2011-03-20 08:06:18

浮.Parentdiv S：

Live Demo

我的测试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/

来源

2011-03-20 06:13:02 thirtydot

我试过你的建议，但仍然坚持堆叠儿童。（我的问题看起来不像你的第二个“坏”例子）。它使父div成为一个孩子div的宽度，并将所有三个孩子垂直放置，一个在下一个下方。我想我想要的是它应该工作的方式，但我的问题完全是另一回事？我会在上面添加更多的代码。 – Nick 2011-03-20 07:19:42

你是对的 - 你问的问题和你的实际问题是完全不同的野兽。我通过使用'display：inline-block'来解决你的实际问题。我在IE7，IE8以及最新版本的Firefox，Chrome，Safari，Opera中测试了我的解决方案。这里是：http://jsfiddle.net/AG3c9/16/ - CTRL + F代表'/ * NEW * /'来查看这两个新的部分。我也从几个地方删除了“float：left”。 – thirtydot 2011-03-20 17:22:25

谢谢你超越！我会猜测这在IE6中不起作用，但我不确定我是否在意。在某些时候，人们只需要更新他们的浏览器！再次感谢！ – Nick 2011-03-21 09:17:44

如何让div自动宽度足以容纳其漂浮的孩子？

回答

相关问题