子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

回答

相關問題