我试图构造一个类似于下面的布局:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
底部填充上一行的空间。
如果这是一个实际的表，我可以使用<td colspan="3">轻松完成，但由于我只是创建一个类似于表的布局，所以不能使用<table>标记。这是可能的使用CSS?
当前回答
尝试添加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>
其他回答
colspan没有简单、优雅的CSS模拟。
对这个问题的搜索将返回各种解决方案，其中包括一系列替代方案，包括绝对定位、大小，以及类似的各种浏览器和特定环境的警告。阅读，并根据你的发现做出最明智的决定。
另一个建议是使用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>
<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>
据我所知，css中没有colspan，但在不久的将来会有用于多列布局的column-span，但由于它只是CSS3中的草稿，你可以在这里检查它。不管怎样，你可以使用div和span来解决这个问题。
这就是HTML:
<div class="table">
<div class="row">
<span class="cell red first"></span>
<span class="cell blue fill"></span>
<span class="cell green last"></span>
</div>
</div>
<div class="table">
<div class="row">
<span class="cell black"></span>
</div>
</div>
这就是css:
/* this is to reproduce table-like structure
for the sake of table-less layout. */
.table { display:table; table-layout:fixed; width:100px; }
.row { display:table-row; height:10px; }
.cell { display:table-cell; }
/* this is where the colspan tricks works. */
span { width:100%; }
/* below is for visual recognition test purposes only. */
.red { background:red; }
.blue { background:blue; }
.green { background:green; }
.black { background:black; }
/* this is the benefit of using table display, it is able
to set the width of it's child object to fill the rest of
the parent width as in table */
.first { width: 20px; }
.last { width: 30px; }
.fill { width: 100%; }
使用这个技巧的唯一原因是为了获得表格布局行为的好处，如果仅仅设置div和span宽度到一定的百分比并不能满足我们的设计要求，我就会使用它。
但如果你不需要从表格布局行为中获益，那么durilai的答案将足够适合你。
尝试添加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>
