0

我有N块非固定宽度div的 child 。而且我有一个非固定宽度的 parent div。我想并排填充和对齐div父级中的子级，例如关系。我怎样才能做到这一点？divtd - tr

4

3 回答 3

0

对子元素使用 float:left，但不要使用 :first 和 clear:both;，而是使用带有“clearfix”类的 div -（见下文）并放置 clear:both; 在 CSS 中。

行间 div 的标记 -

<div class="clearfix">

与 div 相关的 CSS

.clearfix{

    clear:both;

}
于 2013-03-13T16:14:54.550 回答
0

您说的是非固定宽度，而没有提到高度。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-13T16:30:33.027 回答
0

用于float:left子元素。在新行的第一个元素处使用clear:both.

于 2013-03-13T16:07:10.783 回答