[CSS] float 排版對齊問題

在使用 css 的 float 屬性排網頁版面,發現會有在同一列中,出現許多莫名其妙空白格的問題出現,如下面的圖示:

中間每一區的圖片和文字說明,是用一個如下的格式顯示:

<div style=\"float: left;\">
<img src=\"XXX\"/><br/>
<a href=\"XXX\">XXX</a>
</div>
中間總是會出現一堆奇怪的空白區塊,網頁上找了找,找到 NEO 大的網頁有提到的這個問題,原來是因為 float 會有「有洞就鑽」的特色。

我比較偏好手動加上

的 height 屬性的解決方法,只要每一個 div 都一樣長,排版就會正常了,不會出現洞讓 float 亂鑽。

參考:
[CSS] float:left 排版亂象

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

你正使用 WordPress.com 帳號留言。 登出 / 變更 )

Twitter picture

你正使用 Twitter 帳號留言。 登出 / 變更 )

Facebook照片

你正使用 Facebook 帳號留言。 登出 / 變更 )

Google+ photo

你正使用 Google+ 帳號留言。 登出 / 變更 )

連結到 %s