我正在尝试创建以下表格布局,但我想使用DIV代替TABLE:
------------------
| | |
| CELL1 | CELL2 |
| | |
| |--------|
| | |
| | CELL3 |
| | |
------------------
我希望所有单元格的高度都由它们的内容确定(即不使用height:样式)
我尝试在cell1上使用float:left,但好像无法让cell2和cell3表现正常。
编辑 JS Fiddle链接: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;
}