我正在尝试创建下面的表格布局,但是我想使用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;}
此外,由于您没有使用相对或绝对定位,因此您不需要指定顶部和左侧.