我试图构造一个类似于下面的布局:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
底部填充上一行的空间。
如果这是一个实际的表，我可以使用<td colspan="3">轻松完成，但由于我只是创建一个类似于表的布局，所以不能使用<table>标记。这是可能的使用CSS?
当前回答
我创造了这把小提琴:
http://jsfiddle.net/wo40ev18/3/
HTML
<div id="table">
<div class="caption">
Center Caption
</div>
<div class="group">
<div class="row">
<div class="cell">Link 1t</div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell ">Link 2</div>
</div>
</div>
CSS
#table {
display:table;
}
.group {display: table-row-group; }
.row {
display:table-row;
height: 80px;
line-height: 80px;
}
.cell {
display:table-cell;
width:1%;
text-align: center;
border:1px solid grey;
height: 80px
line-height: 80px;
}
.caption {
border:1px solid red; caption-side: top; display: table-caption; text-align: center;
position: relative;
top: 80px;
height: 80px;
height: 80px;
line-height: 80px;
}
其他回答
你可以这样定位:绝对的;并指定宽度。这不是一个很流畅的方法，但这是可行的。
我创造了这把小提琴:
http://jsfiddle.net/wo40ev18/3/
HTML
<div id="table">
<div class="caption">
Center Caption
</div>
<div class="group">
<div class="row">
<div class="cell">Link 1t</div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell ">Link 2</div>
</div>
</div>
CSS
#table {
display:table;
}
.group {display: table-row-group; }
.row {
display:table-row;
height: 80px;
line-height: 80px;
}
.cell {
display:table-cell;
width:1%;
text-align: center;
border:1px solid grey;
height: 80px
line-height: 80px;
}
.caption {
border:1px solid red; caption-side: top; display: table-caption; text-align: center;
position: relative;
top: 80px;
height: 80px;
height: 80px;
line-height: 80px;
}
Media Query类可用于实现带有重复标记的可传递内容。下面是我使用bootstrap的方法:
<tr class="total">
<td colspan="1" class="visible-xs"></td>
<td colspan="5" class="hidden-xs"></td>
<td class="focus">Total</td>
<td class="focus" colspan="2"><%= number_to_currency @cart.total %></td>
</tr>
colspan 1用于移动，colspan 5用于其他使用CSS的工作。
我已经取得了一些成功，尽管它依赖于一些属性来工作:
表布局:固定 border-collapse:独立
以及单元格宽度，即4个单元格的宽度为25%:
.div-table-cell, * { box-sizing: border-box; } .div-table { display: table; border: solid 1px #ccc; border-left: none; border-bottom: none; table-layout: fixed; margin: 10px auto; width: 50%; border-collapse: separate; background: #eee; } .div-table-row { display: table-row; } .div-table-cell { display: table-cell; padding: 15px; border-left: solid 1px #ccc; border-bottom: solid 1px #ccc; text-align: center; background: #ddd; } .colspan-3 { width: 300%; display: table; background: #eee; } .row-1 .div-table-cell:before { content: "row 1: "; } .row-2 .div-table-cell:before { content: "row 2: "; } .row-3 .div-table-cell:before { content: "row 3: "; font-weight: bold; } .div-table-row-at-the-top { display: table-header-group; } <div class="div-table"> <div class="div-table-row row-1"> <div class="div-table-cell">Cell 1</div> <div class="div-table-cell">Cell 2</div> <div class="div-table-cell">Cell 3</div> </div> <div class="div-table-row row-2"> <div class="div-table-cell colspan-3"> Cor blimey he's only gone and done it. </div> </div> <div class="div-table-row row-3"> <div class="div-table-cell">Cell 1</div> <div class="div-table-cell">Cell 2</div> <div class="div-table-cell">Cell 3</div> </div> </div>
https://jsfiddle.net/sfjw26rb/2/
此外，应用display:table-header-group或table-footer-group是将'row'元素跳转到'table'的顶部/底部的便捷方法。
您可以尝试使用像http://960.gs/这样的网格系统
你的代码应该是这样的，假设你使用的是“12列”布局:
<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>
