我正在尝试创建以下表布局,但我希望使用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;
}
发布于 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
。
发布于 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
放在行中)不是一个好的选择。我的是按列分隔的。
发布于 2013-07-21 22:20:54
您可以使用display:inline-block
而不是float
。只需将左侧和右侧容器的宽度设置为约50% (根据填充、边距和边框进行调整),并将它们设置为内联块。
https://stackoverflow.com/questions/17773186
复制相似问题