html - 我如何浮动父母和孩子，同时让孩子排成一行？

Question

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

问题是，除非父 div 设置为 ，否则width: 100%;孩子往往会在另一个下方折叠。

更新：在发布代码时，我想通了，请参阅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: inlineor display: inline-block，它们将垂直堆叠。如果孩子是floated ，他们的大小不会推动父母的界限。如果使用display: inlineor display: inline-block，只要父级的宽度足以容纳所有子级，子级就会内联，并且它们会拉伸父级。

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

Answer 2

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