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

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

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

<div id="outside">
  <div class="box"> class "box" 的內容放在這裡1</div>
  <div class="box"> class "box" 的內容放在這裡2</div>
  <div class="box"> class "box" 的內容放在這裡3</div>
  <div class="box"> class "box" 的內容放在這裡4</div>
  <div class="box"> class "box" 的內容放在這裡5</div>
  <div class="box"> class "box" 的內容放在這裡6</div>
  <div class="box"> class "box" 的內容放在這裡7</div>
  <div class="box"> class "box" 的內容放在這裡8</div>
  <div id="bottom"> id "bottom" 的內容放在這裡</div>
</div>

css部份:

#outside {
	background-color: #FF0;
	width: 580px;
	margin: 5px;
	padding: 10px;
}
.box {
	margin: 5px;
	float: left;
	height: 70px;
	width: 70px;
	background-color: #F90;
	padding: 10px;
	border: 5px solid #900;
}

要重覆出現並且併排的.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的屬性就可以

#outside {
	background-color: #FF0;
	width: 580px;
	overflow: auto;
	margin: 5px;
	padding: 10px;
}

001

底部區塊不併排

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

#bottom {
	background-color: #6CF;
	height: 50px;
}

002
如果希望這個#bottom物件可以跟外框一樣寬,不併排的話,需要在#bottom上套用”clear:both; 清除浮動”的屬性。
※如果連結float屬性區塊的最後,有一個帶有clear:both;屬性的區塊的話,那外框就不用再加overflow:auto了。

#bottom {
	background-color: #6CF;
	height: 50px;
	clear: both;
}

003
用圖片說明的話大概是下面這樣:
clear
最後附上完整的css

#outside {
	background-color: #FF0;
	width: 580px;
	margin: 5px;
	padding: 10px;
}
.box {
	margin: 5px;
	float: left;
	height: 70px;
	width: 70px;
	background-color: #F90;
	padding: 10px;
	border: 5px solid #900;
}
#bottom {
	background-color: #6CF;
	height: 50px;
	clear: both;
}

在〈RWD網頁切版(四){CSS float屬性:浮動 / 併排}〉中有 2 則留言

  1. 您好
    我想詢問,最後段有提到底物件有clear: both;
    外框就不需要overflow: auto;
    但最後附上完整的css中
    外框(#outside)的部分還是有overflow: auto;語法是對的嗎

    再請解惑,謝謝 🙂

    by看完此篇有疑惑的門外漢

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *