如何使div包含每行两个display-cell子div？

Question

我有div，其计算宽度为400px，我想在其中插入许多子div，所有子div都有table-cell显示它们都是200px宽。

但是，不是每行都有div，而是扩展父div的大小。有没有办法让它们自动开始填充下一行等等？

Answer 1

您是否必须为子div使用table-cell属性？如果你还没有..

<div style="width:400px; overflow:auto;">
    <div style="width:200px; float:left;">div 1</div>
    <div style="width:200px; float:left;">div 2</div>
    <div style="width:200px; float:left;">div 3</div>
    <div style="width:200px; float:left;">div 4</div>
    <div style="width:200px; float:left;">div 5</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JSFiddle http://jsfiddle.net/sASpN/1/

Answer 2

默认情况下，Div为display:block;，如果您希望保存display:inline;行为，则可以使用display:inline-block;或block来识别内部div。 另一种方法是给你的内部div是css float:left;或float:right;

Answer 3

将table-layout:fixed添加到父div（display:table的那个）。这只有在您将该div上的width设置为auto以外的其他内容时才有效。

哦，您可能还想添加自动换行：break-word。