我正在尝试创建下面的表格布局,但是我想使用DIV代替TABLE：
------------------ | | | | CELL1 | CELL2 | | | | | |--------| | | | | | CELL3 | | | | ------------------
我想要所有单元格的高度由它们的内容设置(即没有height：style)
我已经尝试使用float：left在cell1上,但似乎不能使单元格2和3的行为.
编辑
JS小提琴在这里：http://jsfiddle.net/utZR3/
HTML：
<div class="list-row">
<div class="list-left">CELL1
</div>
<div class="list-right">
<div class="list-title">CELL2</div>
<div class="list-filters">CELL3
</div>
</div>
</div>
<div class="list-row">
<div class="list-left">CELL1
</div>
<div class="list-right">
<div class="list-title">CELL2</div>
<div class="list-filters">CELL3
</div>
</div>
</div>
<div class="list-row">
<div class="list-left">CELL1
</div>
<div class="list-right">
<div class="list-title">CELL2</div>
<div class="list-filters">CELL3
</div>
</div>
</div>
CSS：
.list-row {
background:#f4f4f4;
border:2px solid red;
}
.list-left {
width:auto;
padding:10px;
top:0px;
left:0px;
border: 2px solid blue;
}
.list-right {
top:0px;
left:60px;
padding:10px;
border:2px solid green;
}
.list-title {
font-size:18px;
padding:8px;
}
.list-filters {
padding:8px;
}
解决方法
你需要内嵌块和浮动：这里是
jsFiddle
.list-row {
background:#f4f4f4;
display:inline-block;
border:2px solid red;}
.list-left {
width:auto;
padding:10px;
float:left;
border: 2px solid blue;}
.list-right {
padding:10px;
float:right;
border:2px solid green;}
此外,由于您没有使用相对或绝对定位,因此您不需要指定顶部和左侧.