首頁 > 文章 > web前端 > CSS的經典三欄佈局如何實現

CSS的經典三欄佈局如何實現

php中世界最好的语言原創: 2018-01-30 10:00:111470瀏覽

這次帶給大家CSS的經典三欄佈局如何實現，實現CSS的經典三欄佈局的注意事項有哪些，下面就是實戰案例，一起來看一下。

本文介紹了CSS經典三欄佈局方案，分享給大家，也給自己做個筆記，具體如下：

三欄佈局，顧名思義就是兩邊固定，中間自適應。三欄佈局在開發十分常見

1. float佈局

最簡單的三欄佈局就是利用float進行佈局。首先來繪製左、右欄：

<style>
  .left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: red;
  }
 
  .right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: yellow;
  }
</style>
   
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

接下來再來看中間欄如何處理。我們知道對於float元素，其會脫離文檔流，其他盒子也會無視這個元素。（但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。）所以此時只需在container容器內添加一個正常的div，其會無視left和right，撐滿整個container，只需再加上margin為left right流出空間即可：

<style>
   .left {
     float: left;
     width: 100px;
     height: 200px;
     background-color: red;
   }
  
   .right {
     float: right;
     width: 100px;
     height: 200px;
     background-color: yellow;
   }
  
   .main {
     background-color: green;
     height: 200px;
     margin-left: 120px;
     margin-right: 120px;
   }
  
   .container {
     border: 1px solid black;
   }
  
   <div class="container">
   <div class="left"></div>
   <div class="right"></div>
   <div class="main"></div>
   </div>

優勢：簡單

劣勢：中間部分最後加載，內容較多時影響體驗

2. BFC 規則

BFC(區塊格式化上下文)規則規定：BFC不會和浮動元素重疊。所以如果將main元素設定為BFC元素即可：

<style>
  .left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: red;
  }
 
  .right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: yellow;
  }
 
  .main {
    background-color: green;
    height: 200px;
    overflow: hidden;
  }
 
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

3. 聖杯佈局

聖杯佈局的核心是左、中、右三欄都透過float進行浮動，然後透過負值margin進行調整。

第一步，先來看下基本佈局

<style>
    .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
    }
 
    .right {
        float: left;
        width: 100px;
        height: 200px;
        background-color: yellow;
    }
 
    .main {
        float: left;
        width: 100%;
        height: 200px;
        background-color: blue;
    }
</style>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

此時看到的效果是：左、右兩欄被擠到第二行。這是因為main的寬度為100%。接下來我們透過調整左、右兩欄的margin來將左、中、右放在一行中：

.left {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    background-color: red;
}
 
.right {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    background-color: yellow;
}

第二步，將left的margin-left設定為-100%，此時左欄會移動到第一行的首部。然後再將right的margin-left設定為其寬度的負值：-100px，則右欄也會移動到和左、中欄一行中：

不過此時還沒有大功告成，我們試著在main中加入一些文字：

<body>
    <div class="container">
        <div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

可以看到文字被壓住了，接下來就要解決這個問題。

第三步，給container一個padding，padding應該剛好等於左、右欄的寬度：

.container {
    padding-left: 100px;
    padding-right: 100px;
}

此時看到的結果是左、中、右三欄都整體收縮了，但文字依然被壓住了。

第四步，給左、右兩欄加上相對佈局，然後再透過設定left和right值向外移動：

.left {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    position: relative;
    left: -100px;
    background-color: red;
}
 
.right {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    position: relative;
    right: -100px;
    background-color: yellow;
}

到此為止，大功告成：

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！