想要製作全部靠右且不併排的區塊,只要加上float屬性之後再做一些調整就可以了
在製作區塊排版的時候,如果希望所有區塊都靠左且不併排的話,那就只要不在區塊上加float屬性就可以了
先附上這個練習會用到的原始碼
html部份:
<div id="outside"> <div id="box1"> id "box1" 的內容放在這裡</div> <div id="box2"> id "box2" 的內容放在這裡</div> <div id="box3"> id "box3" 的內容放在這裡</div> </div>
css部份:
#outside { background-color: #FF0; margin: 10px; padding: 10px; width: 500px; overflow: auto; } #box1 { height: 50px; width: 100px; background-color: #6C0; margin: 5px 0px; } #box2 { height: 50px; width: 200px; background-color: #6C6; margin: 5px 0px; } #box3 { height: 50px; width: 150px; background-color: #6CC; margin: 5px 0px; }
因為網頁的預設物件原點就是左上角,所以在沒有任何設定之下,區塊預設就會靠左對齊,相對如果希望區塊可以靠右對齊的話,就需要加上靠右的css屬性float: right;了,就如上一個單元介紹的,加上了float: right;屬性之後,物件會由右至左的併排,既然這樣的話,那如何達到這個單元所要介紹的效果呢?
其實也是在之前同一個單元一起介紹的”clear:both; 清除浮動”的屬性,應用在這一次的範例的話,就只要在每個區塊上除了float: right;再加上clear:both; 就可以達成了
附上完成的css
#outside { background-color: #FF0; margin: 10px; padding: 10px; width: 500px; overflow: auto; } #box1 { height: 50px; width: 100px; background-color: #6C0; float: right; clear: both; margin: 5px 0px; } #box2 { height: 50px; width: 200px; background-color: #6C6; float: right; clear: both; margin: 5px 0px; } #box3 { height: 50px; width: 150px; background-color: #6CC; float: right; clear: both; margin: 5px 0px; }