網頁上免不了要用到的區塊併排,常用的方式有float和inline-block這種方式,這一篇介紹float的設定方法和相關應用。
下面是要製作併排時基本會用到的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物件會依外框寬度自動換行。
背景色延伸
如上圖所呈現的,內容物件套用float屬性之後背景色不會跟著內容的長度而延伸,如果希望背景可以延伸的話,在外框再加入overflow:auto的屬性就可以
#outside { background-color: #FF0; width: 580px; overflow: auto; margin: 5px; padding: 10px; }
底部區塊不併排
當我們在.box物件的最後加入一個#bottom物件,這個最底下的物件會因為上面.box物件的float屬性而被壓在後面。
#bottom { background-color: #6CF; height: 50px; }
如果希望這個#bottom物件可以跟外框一樣寬,不併排的話,需要在#bottom上套用”clear:both; 清除浮動”的屬性。
※如果連結float屬性區塊的最後,有一個帶有clear:both;屬性的區塊的話,那外框就不用再加overflow:auto了。
#bottom { background-color: #6CF; height: 50px; clear: both; }
#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; }
您好
我想詢問,最後段有提到底物件有clear: both;
外框就不需要overflow: auto;
但最後附上完整的css中
外框(#outside)的部分還是有overflow: auto;語法是對的嗎
再請解惑,謝謝 🙂
by看完此篇有疑惑的門外漢
已更正謝謝~ 歡迎討論