如何浮动父母和孩子们，同时让孩子保持一条线？

Question

如何使用边框（父级）包装未知大小的浮动div（子级），同时将子级保持在同一行中。

问题在于，除非将父div设置为width: 100%;，否则孩子会倾向于将一个div折叠到另一个之下。

更新：在发布代码时，我想出来了，请参阅jsfiddle。

我的代码在孩子周围有额外的<div>封套。我要么必须删除它们，要么将它们设置为display: inline;。

<div class="body">
    <div class="parent">
        <div>
            <div class="child"></div>
        </div>
        <div>
            <div class="child"></div>
        </div>
        <div>
            <div class="child"></div>
        </div>
    </div>
</div>​

感谢您提供其他精彩提示！

Answer 1

如果您不将子级div更改为display: inline或display: inline-block，则它们将垂直堆叠。如果孩子被float编辑，他们的大小将不会突破父母的边界。如果您使用display: inline或display: inline-block，只要父级可以足够宽以适应所有子级，子级将是内联的，并且它们将拉伸父级。

小提琴：http://jsfiddle.net/MPCsD/1/

Answer 2

我认为你必须至少将儿童或父母的宽度设定为固定。也许你可以用java脚本来测量它们。