如何使用div而不是表
如何使用div而不是表
提问于 2013-07-21 22:07:31
我正在尝试创建以下表布局，但我希望使用DIV而不是表：
------------------
| | |
| CELL1 | CELL2 |
| | |
| |--------|
| | |
| | CELL3 |
| | |
------------------我希望所有单元格的高度都由其内容设置(即无高度:样式)
我尝试过在cell1上使用float:left，但似乎无法让单元格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;
}回答 5
Stack Overflow用户
回答已采纳
发布于 2013-07-21 22:20:57
您需要inline-block和float：这是
.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;}此外，由于没有使用relative或absolute定位，因此不需要指定top和left。
Stack Overflow用户
发布于 2013-07-21 22:16:59
尝试以下操作：(working jsFiddle)
HTML：
<div class="container">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>CSS：
.container{overflow:hidden; width:100%;}
.cell{width:50%; float:right;}
#cell1{float:left;}在这种情况下，您的方法(将div放在行中)不是一个好的选择。我的是按列分隔的。
Stack Overflow用户
发布于 2013-07-21 22:20:54
您可以使用display:inline-block而不是float。只需将左侧和右侧容器的宽度设置为约50% (根据填充、边距和边框进行调整)，并将它们设置为内联块。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17773186
复制相关文章
相似问题