Как сделать, чтобы div содержал два дочерних элемента display-cell для каждой строки?

Question

У меня есть div с вычисленной шириной 400px, и я хочу вставить в него много дочерних div с, и все дочерние элементы имеют дисплей table-cell, и все они имеют ширину 200px.

Однако, вместо того, чтобы получать div для каждой строки, они увеличивают размер родительского div.Есть ли способ заставить их автоматически начинать заполнять следующие строки и т. Д. Вместо этого?

Answer 1

Div - display:block; по умолчанию, вы можете css свой внутренний div с display:inline; или display:inline-block;, если вы хотите сохранить поведение block. Еще один способ сделать это, чтобы дать вашему внутреннему div css float:left; или float:right;

Answer 2

Добавьте table-layout:fixed к родительскому div (тот, у которого display:table). Это будет работать только в том случае, если вы установите width для этого элемента отличного от auto.

О, вы также можете добавить перенос слов: break-word.

Answer 3

Нужно ли использовать свойство table-cell для дочерних элементов div? Если нет ...

<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 at http://jsfiddle.net/sASpN/1/