дочерние divs заполнит родительский div

У меня есть N кусочки нефиксированной ширины ребенка div s. И у меня есть родитель с фиксированной шириной div. Я хочу заполнить и выровнять ребенка div с родителем div бок о бок, например td - tr. Как я могу это сделать?дочерние divs заполнит родительский div

источник

2013-03-13 Poison

Здесь вы находитесь http://jsfiddle.net/VTpFS/ – Poison

float:left для детских элементов. В первом элементе новой строки используйте clear:both.

источник

2013-03-13 16:07:10 suspectus

На самом деле представление должно быть похоже на таблицы в примере. Потому что дети могут увеличиваться или уменьшаться. Дивы действуют как таблица. http://jsfiddle.net/5LcZv/ – Poison

Использование float: слева для дочерних элементов, но вместо использования: сначала с ясным: both ;, используйте div с классом clearfix - (см. Ниже) и поставьте clear: both; в css.

Разметка для DIV между рядами -

<div class="clearfix">

CSS, относящийся к DIV

.clearfix{ 

    clear:both; 

}

источник

2013-03-13 16:14:54

Я вижу, я приближался от немного более жидкого способа делать вещи, спасибо за указатели. –

Вы говорите, нефиксированная ширину и ничего о высоте. Отношения тра-тд является особенным и, если это именно то, что вы хотите, вы можете отобразить объекты, такие как таблицы строк/таблица-клетка и т.д.

Здесь вы можете увидеть разницу коды ниже, в действии: http://jsfiddle.net/zv5KF/

body 
{ 
font-size:10px; 
} 
.table 
{ 
display:table; 
border:1px solid black; 
/*width:500px;*/ 
} 
.tr 
{ 
display:table-row; 
} 
.td 
{ 
display:table-cell; 
border:1px solid red; 
<body> 

<div class="table"> 
<div class="tr"> 
<div class="td" style="width:10px;height:10px;">They're</div> 
<div class="td" style="width:50px;height:10px;">all</div> 
<div class="td" style="width:100px;height:100px;">like</div> 
<div class="td" style="width:25px;height:25px;">hello</div> 
<div class="td">and</div> 
<div class="td">hi</div> 
</div> 
</div> 

<div style="border:1px solid black;"> 
<div style="float:left; border:1px solid red; width:10px;height:10px;">They're</div> 
<div style="float:left; border:1px solid red; width:50px;height:10px;">all</div> 
<div style="float:left; border:1px solid red;width:100px;height:100px;">like</div> 
<div style="float:left; border:1px solid red;width:25px;height:25px;">hello</div> 
<div style="float:left; border:1px solid red;width:25px;height:25px;">and</div> 
<div style="float:left; border:1px solid red;">hi</div> 
</div> 

</body>

источник

2013-03-13 16:30:33 apelsinapa

дочерние divs заполнит родительский div

ответ

Смежные вопросы