如果引用或轉貼,麻煩註明出處與本網誌連結,否則視為侵權。

2013年5月10日

CSS float 浮動段落的學習案例

作者: Fred Wang (FW知識瑣記) 日期: 2013.05.09

使用Drupal等平台架站,如果要做更細緻的設計,不免要改到外觀布局,也就是CSS的部分,多數看到的Themes,都是利用CSS進行版面的編排,看來早已經取代HTML老派的Table寫法,在瀏覽器解譯的效能上,透過一些預載的技巧CSS可以達到更佳的效能,也可以有更豐富的呈現效果,在此就不詳細說明。

像我這樣習慣舊式設計的老人,初用CSS float來設計版面,常常會調半天才調正確來,因此,利用下面案例,學習一下CSS float的呈現原理,也分享給新手們參考。

這個例子用不同大小的區塊來呈現文字區塊插入一段文章內效果(如果區塊大小相同,就與table一樣了)。

先看一下這段HTML碼

1.浮動段落要寫在非浮動段落(通常是文章的主文)前,這樣才可以感覺到一段插入在主文中的文字區塊,這個區塊的內容可能是附註,重點提示或簡述,當然也可以是圖片。
2.浮動段落會推動非浮動段落的內容,像下圖把部分非浮動段落的內容往右推。
3.浮動段落,也就是加float的段落,必定是以長方形的方式顯示,且會依序排列,如第一個float:left段落在最左邊,第二個float:left段落其次;而float:right當然是靠右。
4.如果螢幕寬度或瀏覽器視窗變小,兩邊的浮動區塊內縮擠壓到主文(非浮動段落),會如何呢?請看下圖,右方區塊已經將主文往下推了。






沒有留言:

張貼留言

歡迎提供意見, 謝謝 (註 : 留言經過版主審核通過才會發布)