本文介绍了如何使用div而不是表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试创建下面的表布局,但我想使用DIV而不是TABLE:
--- --------------- | | | | CELL1 | CELL2 | | | | | | -------- | | | | | | CELL3 | | | | ------------------我想通过它们的内容设置所有单元格的高度(即没有高度:样式)
我已经尝试使用float:left on cell1, /jsfiddle/utZR3/\">jsfiddle/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:
code> .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; }解决方案
inline-block 和 float :这里是 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;}此外, c $ c>相对或绝对定位,您不需要指定 top 和左。
I am trying to create the following table layout, but I want to use DIV instead of TABLE:
------------------ | | | | CELL1 | CELL2 | | | | | |--------| | | | | | CELL3 | | | | ------------------I want the height of all the cells to be set by their content (i.e. no height: style)
I have tried using float:left on cell1, but can't seem to get cells 2 and 3 to behave.
EDIT JS Fiddle here: jsfiddle/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; }解决方案
You need inline-block and float: here's the 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;}Also, since you're not using relative or absolute positioning, you don't need to specify top and left.
更多推荐
如何使用div而不是表
发布评论