[CSS] float:left 排版亂象

前幾個月開始把 Washop 的預設樣板陸續改成 CSS 排版,其中最方便的就是可以依瀏覽器實際的大小來顯示產品。

20051008_03.gif


紅線區塊內的 CSS 語法,只有一個 DIV:

<div style="float:left;width:160px">
產品內容HTML
</div>

只要設定好區塊的寬度,就可以如同相簿縮圖般自動排列。

之前用 Table 排版的做法必須手動設定在畫面上顯示的欄數,這是受限於 Table 標籤的結構以免畫面亂掉。改用 CSS 排版後就可以取消掉自訂欄數的設定,也讓功能更加簡潔好用。

但是有沒有發現上圖有個奇怪的地方?
沒錯,就是列表中間有一段空白,這個空白是從哪裡來的呢? 

看下圖就知道了:

20051008_03.GIF

原來只要 CSS 裡面使用 float:left ,在自動換列的時候會產生有洞就鑽的狀況。就算一個小洞也不例外,因此造成換行有一段空白產生。

這時若是用 DIV 排版的話,改成用 SPAN ,並且拿掉 float:left 就可以了。

修改為 span 的 CSS 語法:

<span style="width:160px">
產品內容 HTML
</span>

20051008_02.gif

18 comments On [CSS] float:left 排版亂象

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar