利用DIV CSS排版

過去我都愛用TABLE標籤來對網頁作排版的動作,有一段時間覺得也挺好上手的很直覺也很快速,但有時候後來對於比較複雜的版面網頁就會出現很複雜的TR、TD標籤,且要相當依賴IDE工具不然會看不懂自己排什麼版面,效率方面經過搜尋發現效果也比較差,因為要解譯到最後一個才會顯示整個網頁。後來發現CSS也是一種不錯的排版方式,優點是彈性,結構清楚,缺點對我來說就是需要一段適應時間,雖然也知道CSS屬性就那些可是有時候就會忘記怎麼寫了。下面是我自己測試的結果。

假設下圖就是我要排兩個區塊的樣子...html標籤與css安排如下:
<div id="main" >
<div id="sub1">sub1</div>
<div id="sub2">sub2</div>
</div>

#main{width:100%; display:inline-block;}
#sub1{width:50%; float:left;}
#sub2{width:30%; float:left;}

如果sub1、sub2寬度都小於外面的div,且float都設定從左至又安排,就會如上圖所示。

#main{width:100%; }
#sub1{width:50%; float:left;}
#sub2{width:30%; float:left;}


如果缺display:inline-block 就會變成上圖


#main{width:100%; display:inline-block;}
#sub1{width:50%; float:left;}
#sub2{width:70%; float:left;}


被包含的元素寬度也很重要如上圖所示.

以上是自己測試得到的心得...