子div将填写父div

我有N件非固定宽度的子div s。我有一个非固定宽度的父母div。我想填写并对齐子div s父母div并排如td - tr的关系。我怎样才能做到这一点？子div将填写父div

来源

2013-03-13 Poison

在这里，您现在的位置是 http://jsfiddle.net/VTpFS/ – Poison 2013-03-13 16:12:42

使用float:left作为子元素。在新行的第一个元素中使用clear:both。

来源

2013-03-13 16:07:10 suspectus

实际上，视图必须像示例中的表一样。因为孩子可以增加或减少。 Divs就像一张桌子一样。 http://jsfiddle.net/5LcZv/ – Poison 2013-03-13 16:26:23

使用float：留给子元素，而不是使用a：先使用clear：both ;,然后使用一个带有“clearfix”类的div - （见下文）并将clear：both;在CSS中。

标记为格行之间 -

<div class="clearfix">

涉及到div

.clearfix{ 

    clear:both; 

}

来源

2013-03-13 16:14:54

其实这个视图必须像例子中的表一样。因为孩子可以增加或减少。 Divs就像一张桌子一样。 http://jsfiddle.net/5LcZv/ – Poison 2013-03-13 16:25:35

我明白了，我正在接受一种稍微流畅的做事方式，谢谢指点。 – 2013-07-22 15:00:10

CSS你说的非固定宽度和一无所知的高度。在TR-TD的关系是特殊的，如果这正是你想要什么，你可以显示如表行/表单元格对象等

在这里你可以看到下面的代码不同，在行动：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

子div将填写父div

回答

相关问题