RWD網頁切版(四){CSS float屬性:浮動 / 併排}

網頁上免不了要用到的區塊併排,常用的方式有float和inline-block這種方式,這一篇介紹float的設定方法和相關應用。

001

下面是要製作併排時基本會用到的html和css,可以複製以下的語法來練習

html部份:

css部份:

要重覆出現並且併排的.box物件上套用float:left則物件會由左至右排列,反之套用float:right則物件會由右至左排列。

當外框物件有設定"寬width"時,.box物件會依外框寬度自動換行。

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-03-19-11-28-27

背景色延伸

如上圖所呈現的,內容物件套用float屬性之後背景色不會跟著內容的長度而延伸,如果希望背景可以延伸的話,在外框再加入overflow:auto的屬性就可以

001

底部區塊不併排

當我們在.box物件的最後加入一個#bottom物件,這個最底下的物件會因為上面.box物件的float屬性而被壓在後面。

002

如果希望這個#bottom物件可以跟外框一樣寬,不併排的話,需要在#bottom上套用"clear:both; 清除浮動"的屬性。

※如果連結float屬性區塊的最後,有一個帶有clear:both;屬性的區塊的話,那外框就不用再加overflow:auto了。

003

用圖片說明的話大概是下面這樣:

clear

最後附上完整的css

Leave a Reply