Friday, December 4, 2009

[CSS] 用div排版常見的問題

對於習慣用table排版的人,初次嘗試用div排版的時候,通常都會遇到一個問題,就是div沒辦法和其他併排在同一列,那是因為div本身的特性就是會獨立一行,如果要跟其他東西併排的話(例如:文字),就要讓div漂浮起來...
(ps:其實div的特性也可以改掉,不過這邊我們先用漂浮的方式處理)

程式碼:

<div style="float:left;"> box1 </div> <div style="float:left;"> box2 </div>
結果顯示:(加上邊框以利辨識)
1.沒設漂浮
box1
box2
2.有設漂浮
box1
box2


另外,如果是舊版的IE瀏覽器,會發生box1的div邊界會被擴大成兩倍的問題,修正方式很簡單,就是讓div多加上一個display:inline的CSS屬性即可。

No comments:

Post a Comment