CSS 聖盃佈局升級版---多個固定寬度一個自適應寬度

1.一個div固定，一個div自適應寬度。兩種狀況，固定在左或者在右。

HTML：

<div class="box1">
    <div class="main">
        內容自適應寬度
    </div>
    <div class="aside">
        側欄固定寬度
    </div>
</div>

這兩種狀況的HTML排版順序都是同樣的。

CSS：

右邊固定寬度：

.box1 {
  clear: both;
  overflow: hidden;
  padding-right: 110px;/*重要屬性，這個值是側欄的right值*/
}
.box1 .main {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: deepskyblue;
  float: left;
}
.box1 .aside {
  height: 50px;
  line-height: 50px;
  width: 100px;
  background: skyblue;
  float: left;
  margin-right: -100px;/*重要屬性，這個值是側欄的寬度*/
  position: relative;
  right: -10px;/*重要屬性，這個值是自身離其它div的間隙，即10px*/
}

  左邊固定寬度：

.box2 {
  clear: both;
  overflow: hidden;
  padding-left: 110px;/*重要屬性，這個值是側欄的left值*/
}
.box2 .aside {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要屬性，設置-100%就能和內容欄同一行並覆蓋內容欄*/
  position: relative;
  left: -110px;/*重要屬性，該值是自身寬度與間隙之和*/
}
.box2 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

增長一個：只須要簡單的幾個屬性就能達到這種效果：

html：

<div class="box1">
    <div class="aside">
        側欄固定寬度
    </div>    
    <div class="main">
        內容自適應寬度
    </div>    
</div>

 

css：

.aside{
  width:100px;
  float:left;    
}
.main{
 margin-left:100px; //這個值是aside的寬度
}

　　這一個是利用了float破壞流動性，使得div浮在頁面上，後邊的內容自動擠到最左邊，而後設置右邊div的margin值就能達到：左邊固定寬度，右邊自適應寬度的效果。一樣，利用float破壞流動性的特色，也能夠實現右邊固定，左邊自適應。

 

總結：若是固定寬度div在左邊，那麼它就設置margin：-100%，left值就設置比它寬度大的值，好比上面的left：-110，這樣就有10px的間隙，而後裝它們的盒子設置padding-left，這個的值和固定寬度div的left值相等。內容欄除了浮動和寬度100%，其它的都不用設置。固定寬度的div在右邊的時候，就把left，margin-left，padding-left改爲right，margin-right，padding-right就能夠了。

 

2.兩個固定寬度，一個自適應寬度

HTML：

<div class="box1">
    <div class="main">
        內容自適應寬度
    </div>
    <div class="aside1">
        側欄1固定寬度
    </div>
    <div class="aside2">
        側欄2固定寬度
    </div>
</div>

  這三種狀況的HTML排版順序也是同樣的。

CSS：
兩個固定寬度div都在右邊：

.box1 {
  clear: both;
  overflow: hidden;
  padding-right: 240px;/*重要屬性，這個值是兩個側欄寬度加每一個的間隙的值，這裏間隙每一個是10px，因此100+120+10+10=240*/
}
.box1 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -100px;/*重要屬性，這個值是該div的寬度*/
  position: relative;
  right: -10px;/*重要屬性，這個值是自身間隙即10px*/
}
.box1 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要屬性，這個值是該div的寬度*/
  position: relative;
  right: -120px;/*重要屬性，這個值是該div左邊的div的寬度與間隙，加上自身間隙的值，即100+10+10=120，不要理解爲自身的寬度哦*/
}
.box1 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

  兩個固定寬度都在左邊：

.box2 {
  clear: both;
  overflow: hidden;
  padding-left: 240px;/*重要屬性，這個值是兩個div寬度與間隙之和*/
}
.box2 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要屬性，設置-100%能讓該div和內容塊成一行並覆蓋*/
  position: relative;
  left: -240px;/*重要屬性，這個值是padding-left的值*/
}
.box2 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要屬性，設置-100%能讓該div和內容塊成一行並覆蓋*/
  position: relative;
  left: -130px;/*重要屬性，這個值是padding-left減去最左邊div寬度與間隙的值*/
}
.box2 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

 一個固定寬度在左，一個固定寬度在右。自適應寬度在中間。

.box3 {
  clear: both;
  overflow: hidden;
  padding: 0 130px 0 110px;/*重要屬性，這個值是左右兩邊div的寬度*/
}
.box3 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要屬性*/
  position: relative;
  left: -110px;/*重要屬性，這個值是自身寬度加上間隙*/
}
.box3 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要屬性，這個值是自身寬度*/
  position: relative;
  right: -10px;/*重要屬性，這個值是自身離其它div的間隙*/
}
.box3 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

 　　總結：兩個div固定寬度的狀況，仍是隻操做固定寬度的div，自適應寬度的無論它。在左邊的div就設置margi-left：-100%，left就是寬度與間隙的值；右邊的就設置margin-right：負自身寬度，相對定位的right就是寬度與間隙的值。

 

 3.多個固定寬度，一個自適應寬度

 

HTML：

<div class="box1">
    <div class="main">
        內容自適應寬度
    </div>
    <div class="aside1">
        側欄1固定寬度
    </div>
    <div class="aside2">
        側欄2固定寬度
    </div>
    <div class="aside3">
        側欄3固定寬度
    </div>
</div>

三種狀況的HTML排版順序也同樣。

CSS：

三個固定寬度div在最右邊，自適應寬度div在左邊

.box1 {
  clear: both;
  overflow: hidden;
  padding-right: 390px;/*重要屬性，該值是每一個div寬度與間隙之和*/
}
.box1 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -100px;/*重要屬性，該值是該div的寬度*/
  position: relative;
  right: -10px;/*該值是自身離其它div的間隙*/
}
.box1 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要屬性，該值是該div的寬度*/
  position: relative;
  right: -120px;/*該值是該div的左邊div寬度與間隙，加上自身間隙的值，即100+10+10=120*/
}
.box1 .aside3 {
  width: 140px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -140px;/*重要屬性，該值是該div的寬度*/
  position: relative;
  right: -250px;/*該值是該div的左邊div寬度與間隙，加上自身間隙的值，即100+10+120+10+10=250*/
}
.box1 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

兩個固定寬度div在最左邊，另外一個在最右邊，自適應寬度div在最中間

.box2 {
  clear: both;
  overflow: hidden;
  padding: 0 150px 0 240px;/*重要屬性，左邊的padding是兩個div的寬度與間隙之和，右邊的是一個div寬度與間隙之和*/
}
.box2 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要屬性*/
  position: relative;
  left: -240px;/*重要屬性，因爲該div是在最左邊的，因此left值是padding的left的值*/
}
.box2 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要屬性*/
  position: relative;
  left: -130px;/*重要屬性，該值是padding的left的值減去最左邊的div寬度與間隙的值*/
}
.box2 .aside3 {
  width: 140px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -140px;/*重要屬性，該值是該div寬度與間隙的值*/
  position: relative;
  right: -10px;/*重要屬性，因爲設置了margin-right以後，該div到了最右邊，因此這裏的right值是間隙值*/
}
.box2 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

一個固定寬度div在左邊，另外兩個在最右邊，自適應寬度在中間

.box3 {
  clear: both;
  overflow: hidden;
  padding: 0 280px 0 110px;/*重要屬性，padding的right值是右邊兩個div寬度與間隙的和；padding的left值是左邊的div寬度與間隙的和*/
}
.box3 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要屬性*/
  position: relative;
  left: -110px;/*重要屬性，該值是該div寬度與間隙的值*/
}
.box3 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要屬性，該值是該div寬度*/
  position: relative;
  right: -10px;/*重要屬性，因爲設置了margin-right，因此該值是間隙值*/
}
.box3 .aside3 {
  width: 140px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -140px;/*重要屬性，該值是該div寬度*/
  position: relative;
  right: -140px;/*重要屬性，該值是它緊鄰的左邊的div的寬度與間隙還有自身與div間隙的和，即120+10+10=140*/
}
.box3 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

 　　總結：多個div固定寬度，一個自適應的佈局方式和兩個固定寬度，一個自適應的佈局方式也是一樣的原理，只操做固定的div，自適應的無論，而後設置裝它們的盒子的padding值。固定寬度div設置相對定位的left或者right值，設置margin-left或者margin-right的值。

 

　　聖盃佈局最終總結：

　　1.HTML排版都是自適應div在最前面，而後是固定寬度div。

　　2.都設置float：left。

　　3.若是div在左邊，則該div設置margin-left：-100%。若是div在右邊，則該div設置margin-right：負自身寬度

　　4.在左邊的div設置相對定位的left值，若是是一個div，則該值是padding-left的值，也就是該div寬度與間隙之和的負值。若是左邊是多個div，那麼當前div的left值就是它右邊全部的div的寬度與間隙的和再加上自身的寬度與間隙的值的負值。

　　5.在右邊的div設置相對定位的right值，該值是自身的間隙的負值。若是右邊是多個div，那麼當前div的right值就是它左邊全部的div的寬度與間隙的和再加上自身的間隙的值的負值。

　　6.這些div的外層的大盒子設置padding值，這個值是左邊或者右邊div的寬度與間隙的和。例如左邊一個固定寬度的div，寬度爲50，間隙是15；而後右邊兩個固定寬度的div，寬度分別是80、100，間隙都是10.那麼padding值就應該設置爲padding：0 200px 0 65px;

　　7.自適應div的寬度設置爲100%，其它的都不用管。