很多時候我們需要做出同一頁面有二到三個欄位的排版, 除了使用table劃分外, 另外一種常見的方式是使用float: left, 將div 定義為float:left可以使division之間會自動向左靠, 若因大小限制而擠不進, div會自動移到下一行, 所以您只要定義好div之間的大小就可以達成column-column的排版. 然而, 在IE與FF實作時會發現有些不同點.
IE:
<div id=”parent”> <!– parent 不需定義大小, child1, child2 會自動插到parent裡面 –>
<div id=”child1″> <!– float: left –>
<div id=”child2″> <!– float: left –>
</div>
FF:
<div id=”parent”>
<!– parent 一定要定義大小(width=”400px”), child1, child2 才會插到parent裡面, 否則height的呈現是會出現問題的 –><div id=”child1″> <!– float: left –>
<div id=”child2″> <!– float: left –>
</div>