Question

我有 N 件非固定宽度的孩子div。我有一个非固定宽度的父div。我希望在父div中并排填充并对齐div个孩子td - tr，例如{{1}}关系。我怎么能这样做？

Answer 1

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

Answer 2

使用float：left作为子元素，但不使用：first with clear：both;，使用带有“clearfix”类的div - （见下文）并将clear：both; both;在css。

行之间的div标记 -

<div class="clearfix">

与div相关的CSS

.clearfix{

    clear:both;

}

Answer 3

你说的是非固定宽度而不是高度。 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>

子div将填充父div

3 个答案: