用overflow:hidden來解決破版問題

作者: Jas / 發表於 2010-09-16

用overflow:hidden解決破版問題

選擇走Tableless layout作為網頁設計工作路線,偶爾會碰到一些從前使用DreamWeaver不曾遇過的問題。

譬如以下這張圖所顯示的:

用overflow:hidden解決破版問題

當你以一個div當作layout容器,試著在這個容器裡擺進一個齊左的黃色內容區塊,結果卻破版了。

選擇如何處理破版的解決方案,通常也決定了我們對Web designer的評價。

對任何一位熟用DreamWeaver的Web designer來說,面對破版,最安全的決定就是退一千步回頭去用DreamWeaver,走Table-based layout的老路,重返你的Comfort zone

在任何情況下,選擇留下來繼續與Tableless layout奮戰,無疑都是相對危險的決定。

但,危險終究只是一種感覺。

如果你想清楚,破版最糟糕的下場,根本也不至於會出人命。或許,感覺危險的嚐試,還是值得放手一搏的。

回到上圖顯示的打包不全破版問題,其癥結點在於float。

用overflow:hidden解決破版問題

clear float的解決作法不止一種。

不過,用overflow:hidden來解決,應該是最力求簡潔的一種。

面對破版問題,跳出Comfort zone的Web designer有機會找到最簡潔的解法,而選擇留在Comfort zone的Web designer,則只能繼續跟DreamWeaver玩巢狀迴圈。





回上方