我试图构造一个类似于下面的布局:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
底部填充上一行的空间。
如果这是一个实际的表，我可以使用<td colspan="3">轻松完成，但由于我只是创建一个类似于表的布局，所以不能使用<table>标记。这是可能的使用CSS?
当前回答
我来这里是因为目前WordPress表块不支持colspan参数，我想我会用CSS替换它。这是我的解决方案，假设列的宽度相同:
table { width: 100%; } table td { width: 50%; background: #dbdbdb; text-align: center; } table tr:nth-child(2n+1) { position:relative; display:block; height:20px; background:green; } table tr:nth-child(2n+1) td { position:absolute; left:0; right:-100%; width: auto; top:0; bottom:0; background:red; text-align:center; } <table> <tr> <td>row</td> </tr> <tr> <td>cell</td> <td>cell</td> </tr> <tr> <td>row</td> </tr> <tr> <td>cell</td> <td>cell</td> </tr> </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>
colspan没有简单、优雅的CSS模拟。
对这个问题的搜索将返回各种解决方案，其中包括一系列替代方案，包括绝对定位、大小，以及类似的各种浏览器和特定环境的警告。阅读，并根据你的发现做出最明智的决定。
你可以这样定位:绝对的;并指定宽度。这不是一个很流畅的方法，但这是可行的。
如果使用div和span，当datagrid-table行体积更大时，它将占用更多的代码大小。下面的代码在所有浏览器中都进行了检查
HTML:
<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4>
</div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
CSS:
#gridheading {
background: #ccc;
border-bottom: 1px dotted #BBBBBB;
font-size: 12px;
line-height: 30px;
text-transform: capitalize;
}
.data {
border-bottom: 1px dotted #BBBBBB;
display: block;
font-weight: normal;
line-height: 20px;
text-align: left;
word-wrap: break-word;
}
h4 {
border-right: thin dotted #000000;
display: table-cell;
margin-right: 100px;
text-align: center;
width: 100px;
word-wrap: break-word;
}
.data .big {
margin-right: 150px;
width: 200px;
}
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的工作。
