我试图构造一个类似于下面的布局:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
底部填充上一行的空间。
如果这是一个实际的表，我可以使用<td colspan="3">轻松完成，但由于我只是创建一个类似于表的布局，所以不能使用<table>标记。这是可能的使用CSS?
当前回答
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的工作。
其他回答
这不是CSS权限的一部分。colspan描述页面内容的结构，或者为表中的数据赋予一些含义，这是HTML的工作。
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的工作。
colspan没有简单、优雅的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;
}
尝试添加display: table-cell;宽度:1%;到您的表格单元格元素。
.table-cell { display: table-cell; width: 1%; padding: 4px; border: 1px solid #efefef; } <div class="table"> <div class="table-cell">one</div> <div class="table-cell">two</div> <div class="table-cell">three</div> <div class="table-cell">four</div> </div> <div class="table"> <div class="table-cell">one</div> <div class="table-cell">two</div> <div class="table-cell">three</div> <div class="table-cell">four</div> </div> <div class="table"> <div class="table-cell">one</div> </div>
