CSS常用布局整理（二）

標籤：style   blog   http   ar   color   使用   sp   on   div   

1-2-1單列變寬布局

side列定寬300px，content列變寬，尺寸是100%-300px。核心的問題就是浮動列的寬度應該等於“100% - 300px”，而CSS顯然不支援這種帶有減法運算的寬度表達方法。但是通過margin可以變通的實現這個寬度。實現的原理為，在content外面再套一個div，即圖中的contentWrap，使它的寬度為100%，也就是等於container的寬度。然後通過將其margin-left設定為-300px，就使它向左平移了300px。再將content的margin-left設定為正300px，就實現了“100% - 300px”這個本來無法表達的寬度。此時，content在contentWrap的裡面，以標準流的方式存在，將將其左側margin設定為300px之後，就可以保證裡面的內容不會溢出到布局的外面。使用浮動布局： contentWrap左浮動，side右浮動。這種方法的最大好處就是不用考慮各列的高度，通過設定footer的clear: both屬性，就可以保證不會發生重疊現象。

CSS代碼：

#header, #footer, #container {    margin: 0 auto;    width: 85%;}#contentWrap {    margin-left: -300px;    float: left;    width: 100%;}#content {    margin-left: 300px;}#side {    float: right;    width: 300px;}#footer {    clear: both;}

1-3-1單列變寬布局
 類似於上面的做法，只需要在兩個變寬列的外面套一個div，並且這個div寬度是變寬的。它與旁邊的固定寬度列構成一個單列固定的“1-2-1”布局，然後再將變寬列中的兩個變寬列按比例並排，就很容易實現了。對於上例中的contentWrap容器，如果內部只有一個div活動列，就像上面的“1-2-1”布局那樣，這個活動列以標準流方式放置，它的寬度是自然形成的，這樣顯示效果是沒有問題的，而當contentWrap容器中有兩個浮動的活動列時，就需要分別設定寬度，比如分別為40%和60%(為了避免四捨五入誤差，這裡設定59.9%)。需要特別注意的是，contentWrap列的寬度等於container的寬度，因此這裡的40%並不是總寬度減去side的寬度以後的40%，而是總寬度的40%，這顯然不是我們想要的。解決的方法就是在容器裡面再套一個div，即由原來的一個contentWrap變為兩層，分別是outerWrap和innerWrap。 新增加的innerWrap是以標準流方式存在的，寬度會自然伸展，由於設定了200px的左側margin，因此它的寬度就是總寬度減去200px了，這樣，innerWrap裡面的navi和content就會以這個新寬度為寬度基準。

#header, #footer, #container {    margin: 0 auto;    width: 85%;}#outerWrap {    float: left;    width: 100%;    margin-left: -200px;}#innerWrap {    margin-left: 200px;}#navi {    float: left;    width: 40%;}#content {    float: right;    width: 59.5%;}#side {    float: right;    width: 200px;}#footer {    clear: both;}

 

1-3-1兩側列固定寬度布局

兩側列固定寬度，中間變寬。先把左邊和中間兩列看做一組，作為一個活動列，而右邊的一列作為固定列。然後再把兩列各自當做獨立的列，左側為固定列，最後保留content為變寬列。在使用該方法時，每實現一個活動列都需要增加額外的輔助div。這裡的思路是，在內層，為了使navi固定，content變寬，在二者外面套了一個“innerWrap”的div；為了在innerWrap中使content能夠變寬，在content外面又套了contentWrap的div；同理，為了使innerWrap能夠變寬，又為它套了一個outerWrap，從而使得結構變得複雜。但原理是相同的。 

 

 CSS代碼：

#header, #footer, #container {    margin: 0 auto;    width: 85%;}#side {    width: 200px;    float: right;}#outerWrap {    width: 100%;    float: left;    margin-left: -200px;}#innerWrap {    margin-left: 200px;}#navi {    width: 150px;    float: left;}#contentWrap {    width: 100%;    float: right;    margin-right: -150px;}#content {    margin-right: 150px;}#footer {    clear: both;}

OK了。

 

CSS常用布局整理（二）