我正在尝试创建下面的表格布局,但是我想使用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;}
此外,由于您没有使用相对或绝对定位,因此您不需要指定顶部和左侧.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。