html – 如何使用div而不是表

前端之家收集整理的这篇文章主要介绍了html – 如何使用div而不是表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建下面的表格布局,但是我想使用DIV代替TABLE: @H_502_2@------------------ | | | | CELL1 | CELL2 | | | | | |--------| | | | | | CELL3 | | | | ------------------

我想要所有单元格的高度由它们的内容设置(即没有height:style)

我已经尝试使用float:left在cell1上,但似乎不能使单元格2和3的行为.

编辑
JS小提琴在这里:http://jsfiddle.net/utZR3/

HTML:

@H_502_2@<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:

@H_502_2@.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 @H_502_2@.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;}

此外,由于您没有使用相对或绝对定位,因此您不需要指定顶部和左侧.

猜你在找的HTML相关文章