我试图构造一个类似于下面的布局:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
底部填充上一行的空间。
如果这是一个实际的表，我可以使用<td colspan="3">轻松完成，但由于我只是创建一个类似于表的布局，所以不能使用<table>标记。这是可能的使用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'的顶部/底部的便捷方法。
其他回答
<div style="width: 100%;">
<div style="float: left; width: 33%;">Row 1 - Cell 1</div>
<div style="float: left; width: 34%;">Row 1 - Cell 2</div>
<div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>
我已经取得了一些成功，尽管它依赖于一些属性来工作:
表布局:固定 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'的顶部/底部的便捷方法。
如果你来这里是因为你必须打开或关闭colspan属性(比如移动布局):
复制<td>，只显示所需colspan的值:
table.colspan--on td.single { display: none; } table.colspan--off td.both { display: none; } <!-- simple table --> <table class="colspan--on"> <thead> <th>col 1</th> <th>col 2</th> </thead> <tbody> <tr> <!-- normal row --> <td>a</td> <td>b</td> </tr> <tr> <!-- the <td> spanning both columns --> <td class="both" colspan="2">both</td> <!-- the two single-column <td>s --> <td class="single">A</td> <td class="single">B</td> </tr> <tr> <!-- normal row --> <td>a</td> <td>b</td> </tr> </tbody> </table> <!-- that's all --> <!-- stuff only needed for making this interactive example looking good: --> <br><br> <button onclick="toggle()">Toggle colspan</button> <script>/*toggle classes*/var tableClasses = document.querySelector('table').classList; function toggle() { tableClasses.toggle('colspan--on'); tableClasses.toggle('colspan--off'); } </script> <style>/* some not-needed styles to make this example more appealing */ td {text-align: center;} table, td, th {border-collapse: collapse; border: 1px solid black;}</style>
提供一个最新的答案:今天最好的方法是使用css网格布局，像这样:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"top-left top-middle top-right"
"bottom bottom bottom"
}
.item-a {
grid-area: top-left;
}
.item-b {
grid-area: top-middle;
}
.item-c {
grid-area: top-right;
}
.item-d {
grid-area: bottom;
}
以及HTML
<div class="container">
<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>
</div>
另一个建议是使用flexbox而不是完全使用表格。这当然是一个“现代浏览器”的事情，但拜托，这是2016年;)
至少对于那些现在正在寻找答案的人来说，这可能是另一种解决方案，因为最初的帖子是在2010年发布的。
这里有一个很好的指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.table { border: 1px solid red; padding: 2px; max-width: 300px; display: flex; flex-flow: row wrap; } .table-cell { border: 1px solid blue; flex: 1 30%; } .colspan-3 { border: 1px solid green; flex: 1 100%; } <div class="table"> <div class="table-cell"> row 1 - cell 1 </div> <div class="table-cell"> row 1 - cell 2 </div> <div class="table-cell"> row 1 - cell 3 </div> <div class="table-cell colspan-3"> row 2 - cell 1 (spans 3 columns) </div> </div>
