html - 用花车而不是 table 来排列东西？

Question

我了解 float 元素如何有助于将元素彼此并排放置并从本质上缩小以适合，但如何才能实现类似表格的外观

Column 1        |        Column 2        |        Column 3
Column 4 Bigger |        Column 5        |        Column 6

请注意第一组列如何调整以适合最大元素的长度？那么如果第 4 列比 1 宽，1 会自动变宽吗？到目前为止，我能做到这一点的唯一方法是使用 display: table 和 display: table-cell，但它有点不稳定，因为我必须设置特定的宽度等。除非我做错了什么，也许表格在某种程度上是最好的做这种事情的方法......在一个没有表格的网络中。

Answer 1

希望这能回答您的问题:):

<style>
.clear{
clear:both;
}

.column {
float:left;
height :20px;
width: auto ;
margin:5px;
display :block;
}
</style>


<div id = "Column 1 " class="column">
cell 1
<div class="clear"></div>
cell 4 Bigger
<div class="clear"></div>
cell 7
</div>

<div id = "Column 2 " class="column">
Cell 2
<div class="clear"></div>
Cell 5 
<div class="clear"></div>
Cell 8 
</div>

<div id = "Column 3 " class="column">
Cell 3
<div class="clear"></div>
Cell 6 
<div class="clear"></div>
Cell 9 
</div>

编辑添加边框也很简单。你可以检查那个网址: http://www.bernzilla.com/design/tables/table.html