RWD網頁切版(六){CSS float屬性:物件全部靠右且不併排}

想要製作全部靠右且不併排的區塊,只要加上float屬性之後再做一些調整就可以了

101

在製作區塊排版的時候,如果希望所有區塊都靠左且不併排的話,那就只要不在區塊上加float屬性就可以了

102

先附上這個練習會用到的原始碼

html部份:

css部份:

因為網頁的預設物件原點就是左上角,所以在沒有任何設定之下,區塊預設就會靠左對齊,相對如果希望區塊可以靠右對齊的話,就需要加上靠右的css屬性float: right;了,就如上一個單元介紹的,加上了float: right;屬性之後,物件會由右至左的併排,既然這樣的話,那如何達到這個單元所要介紹的效果呢?

其實也是在之前同一個單元一起介紹的"clear:both; 清除浮動"的屬性,應用在這一次的範例的話,就只要在每個區塊上除了float: right;再加上clear:both; 就可以達成了

101

附上完成的css

 

Leave a Reply