0

N個の非固定幅の子divs があります。そして、幅が固定されていない親がありdivます。関係など、子divを親に並べて埋めて揃えたいです。どうやってやるの？divtd - tr

4

3 に答える 3

0

あなたは幅が固定されておらず、高さについては何も言いません。tr-td の関係は特別であり、まさにそれが必要な場合は、table-row/table-cell などのオブジェクトを表示できます。

ここでは、以下のコードの違いを実際に確認できます: 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-13T16:30:33.027 に答える
0

子要素には float:left を使用しますが、clear:both; で :first を使用する代わりに、"clearfix" のクラスで div を使用します (以下を参照)。clear:both; を配置します。cssで。

行間の div のマークアップ -

<div class="clearfix">

divに関するCSS

.clearfix{

    clear:both;

}
于 2013-03-13T16:14:54.550 に答える
0

float:left子要素に使用します。新しい行の最初の要素で を使用しますclear:both。

于 2013-03-13T16:07:10.783 に答える