html - 用花车而不是桌子排列东西？

Question

我了解浮动如何有助于将元素彼此并排放置并基本上缩小以适应，但是如何实现类似表格的外观

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

Answer 2

没有办法单独使用浮动来使第 1 列的宽度取决于第 4 列的宽度更大（即，随着第 4 列更宽，它变得更宽）。

相反，您可能希望将 Column 1 和 Column 4 Wider 包含在浮动容器中，然后从 Columns 1 和 4 中删除浮动。同样，对 2 和 5 以及 3 和 6 执行相同的操作。