負邊距實現聖盃佈局以及列等高

    聖盃佈局以下圖所示，

圖一

兩邊的內容寬度固定，中間欄寬度自適應。html代碼以下，

<div class="container">
     <div class='main'>
          <p>main</p>
          <p>主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容主幹內容</p>  
     </div>
     <div class='sub'>
         <p>sub</p>
         <p>sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容sub內容</p>
     </div>
     <div class='extra'>
         <p>extra</p>
           <p>extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容extra內容</p>
     </div>

     在寫html是應儘可能先不考慮佈局（固然，這比較難作到），這樣才能比較好的保證語義化。注意到，雖然main的內容是顯示在中間的，可是在html中把它放到了sub和extra的前面，主要是出於幾個方面考慮：

1. 更符合語義，主體內容應放在前面
2. 當網速比較慢時，可以先加載主要內容，好比css文件加載失敗時，主體內容可以在更靠前的位置顯示
3. 主要內容放前面，有助於SEO（未考證）

     爲了佈局，爲main,sub,extra三個模塊都加上了相應的css類。下面來考慮一下佈局，sub和extra寬度固定，分別爲190px和230px。首先，main模塊須要自適應，說俗一點，也就是能佔的地方它就佔，那咱就讓它霸道一點，width設爲100%（後來仔細想一想此設置爲多餘）。讓sub,main,extra都在一行上，相信你們都想到了float,可是三個都設置爲float:left以後，由於html結構中main放在sub和extra以前，並且main的寬度設爲100%,因此效果以下，

                         圖二

     要怎麼樣才能讓sub和extra都上去呢，這時候就須要使用神奇的負邊距了。設置sub的margin-left:-100%,extra的margin-left:-230px;/*230px是extra的寬度*/

圖三

此時的css代碼

.main{
    width:100%;
    float:left;
    background: #D6D6D6;
}
.sub{
    float:left;
    background:red;
    width:190px;
    margin-left:-100%;
}
.extra{
    float:left;
    width:230px;
    background:blue;
    margin-left:-230px;
}

 

欣喜的發現，顯示到一行了。爲何呢，本身動手實驗一下就會明白，從0開始一直減少sub的margin-left會發現，sub塊的內容在向左移，左移的那部份內容相移出了可視範圍，而後一直減少到-189px（sub的寬度是190px）時,只能看到sub的一像素的邊，此時它仍是處在main的下方，並無上去。可是當減到-190px（和本身寬度相同）時，忽然發現它上移了，和main處在一行。以下圖所示

圖四

      所以要想要達到最開始說的效果，sub和extra分別在main的左右，那sub要左移一個容器的寬度（上移一行，margin-left:-100%），而extra需左移自身寬度，margin-left:-230px，就達到了圖三的效果。

      作到這兒覺得大功告成，就是經過可是仔細觀察後發現，main的內容顯示不全，如今效果實際上是sub和extra把本來main本來顯示的文字給覆蓋住了，不是咱們想要的自適應的效果。這時候須要考慮把main的勢力收縮一下，這時候只能請sub的‘老子’container出來管管它了，設置container的左右padding，來讓main的內容不能伸展到左右兩邊，設置完以後，效果以下

圖五

     爲了方便你們看出問題，我給外層container設置了寬高，並加上1px的外邊框，能夠看出，此時main的內容是對的，可是sub,和extra的內容不對，container的padding把它們也往中間壓了，而且經過extra如今所處的位置咱們隊以前設置的負邊距能有個更深的理解，設置邊距爲-width並不意味着就必定是從下行的行首到上一行的行末，而是到上一行可以到達的最靠後的位置。

     接下來須要對sub和extra的位置進行調整，使用position：relative，對它們分別做相應的偏移便可，效果以下，

 

   總算對了，調整瀏覽器寬度，發現main的寬度可以自適應。呼，終於能夠洗洗睡了。等一下！三列不等高也太難看了，怎麼讓他們高度一致呢？仍是用以前用到的負邊距，同時結合padding來實現。思路就是經過設置padding,把三列的高度都撐高，而後設置與之對應的負邊距，這樣這幾列下方的元素不會被頂下去，而後給容器設置適當的高度，而後設置overflow:hidden，效果以下，

    css代碼以下

.container{
    padding:0 230px 0 190px;
    height: 292px;
    overflow: hidden;
}
.main{
    width:100%;
    float:left;
    background: #D6D6D6;
}
.sub{
    float:left;
    background:red;
    width:190px;
    margin-left:-100%;
    position:relative;
    left:-190px;*/
}
.extra{
    float:left;
    width:230px;
    background:blue;
    margin-left:-230px;
    position:relative;
    right:-230px;
}
.container div{
    padding-bottom: 5000px;
    margin-bottom: -5000px;
}

 

     總算搞定了。總結一下思路：

1. 經過設置負的margin-left讓本來在下方的sub和extra上移到與main在同一行
2. 設置外部container的左右padding來使main的內容收縮到中間
3. 由於外部的container的padding，sub和extra的位置也發生了相應偏移，經過position:relative，在分別設置偏移，使sub和extra到正確的位置
4. main,sub,extra的高度都是被其內部的內容高度撐起來的，高度各不同，設置padding和和負的邊距，再給外部容器設定高度，並作overflow：hidden處理，來使各列的高度一致。注意padding和負邊距的值要取的比較大，防止有某列加上了padding尚未超過外部容器的高度，致使沒有觸發外部容器的overflow，進仍是不能實現等高效果