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列更宽时，它会变得更宽）。

相反，您可能希望将第1列和第4列Wider包含在浮动容器中，然后从第1列和第1列中删除浮点数。同样，为2＆amp;同样做同样的事情。 5和3＆amp; 6。

用浮子而不是桌子填充物品？

2 个答案: