本文介绍了如何使用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而不是表
发布评论