三欄佈局的n種實現

時間 2019-12-05

標籤佈局實現简体版

原文原文鏈接

本文主要討論左右邊欄固定寬度，中間欄填滿其他空間的佈局。至於其餘類型，基本上也就是半斤和八兩。每一種佈局都會有個Demo，我的依然認爲文章裏帖代碼並無Demo來的直接。因此正文負責解釋，源碼參見Demo。其中討論了這麼多種（6種）佈局，有如下理由：1是每種佈局也都有他的毛病，沒有十全十美的，每種佈局也都有人在用。2是雖然有相對優秀的方案，可是不優秀的方案也有有用的東西在裏邊，可能會啓發其餘的思路補充遺漏的知識點。html

1. 利用絕對定位特色：

左右兩欄採用絕對定位抽離文檔流，分別固定於頁面的左右兩側，中間欄用左右margin值撐開能夠容納左右邊欄的距離。這個很簡單很少解釋。 Demo:absoluteLayoutide

2. 利用兩側浮動都不佔據文檔流：

左欄左浮動，右欄右浮動，中間欄左右margin值等於左右欄寬度。html中，中間欄要放在左右邊欄的後邊。道理上和絕對定位差很少，就是不佔文檔流了其餘元素就填充上了，只要把兩邊留出空間不致使重合便可。 Demo：twoSidesFloatLayoutDemo佈局

3. 利用浮動和margin負值的特色：

標籤順序爲<middle></middle> <left></left> <right></right> middle 寬度 100%，sub 左右 margin 爲左右欄留出空間,其中 sub 元素不要浮動，不然會包裹裏面的內容而不會撐滿空間，其餘元素所有左浮動。left 的 margin-left 爲－100%，right 的margin-left爲sub的負的margin-right 。浮動的特色就是緊跟着前一個元素，放不下了就換行，原本middle元素佔滿了第一行，sub元素的margin留出的空間並不會給其餘的浮動元素，左欄被迫換行，處於第二行最左側，至關於緊跟着第一行後邊，100%的負margin－left會讓他從緊跟着第一行變成第一行最左邊，這時左欄和sub元素的margin－left留出的空間重合，達到目的，此時右欄在原來左欄的位置，再用相似的處理方式，達到最終效果。其中sub的margin能夠換爲padding，相同的原理和效果。此處若是不須要撐滿空間（有內容撐滿sub）能夠不要父元素（即middle）。Demo：floatLayoutDemo。說的有點亂其實就是這個樣子：flex

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
        *{margin: 0;padding: 0;height: 100%;}
          .l,.r,#main{
            text-align: center;
            float:left;
          }
          #main{
            width: 100%;
          }
          .l{
            width: 100px;
            margin-left: -100%;
            background-color: #aaaaaa;
          }
          .c{
            text-align: center;
            margin-left: 100px;
            margin-right: 200px;
            background-color: #555555;
          }
          .r{
            width: 200px;
            margin-left: -200px;
            background-color: #aaaaaa;
          }
        </style>
      </head>
      <body>
        <div id="main">
          <div class="c">
            我中間
          </div>
        </div>
        <div class="l">
          我左邊
        </div>
        <div class="r">
          我右邊
        </div>
      </body>
    </html>

4. 利用inline-block特色：

父元素包含左中右欄：（子元素順序中，左，右）父元素設置padding爲左右欄留出空間，而後中欄寬度100%佔據除padding外的空間，左右欄利用margin－left等於自身寬的負值使其與中欄右邊界重合，再調節left，左欄left爲－100%右欄left爲右欄寬度。左中右欄所有爲子元素，因此margin－left沒法佔據padding空間，須要左右邊欄相對定位後調解left值達到目標狀態。其中注意父元素設置font-size: 0; letter-spacing: -4px; 子元素再重置這兩個屬性。 Demo：inlineBlockLayoutDemo。說的有點亂，其實就是這個樣子：ui

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
        *{margin: 0;padding: 0;height: 100%;}
          .l,.c,.r{
            display: inline-block;
            font-size: 16px;
            letter-spacing: normal;
          }
          .l{
            width: 100px;
            margin-left: -100px;
            position: relative;
            left: -100%;
          }
          .c{
            width:100%;
            background-color: #555555;
          }
          .r{
            position: relative;
            width: 200px;
            margin-left: -200px;
            left: 200px;
          }
          #box{
            text-align:center;
            padding-left: 100px;
            padding-right: 200px;
            background-color: #aaaaaa;
            font-size: 0;
            letter-spacing: -4px;
          }
        </style>
      </head>
      <body>
        <div id="box">
          <div class="c">
            我中間
          </div>
          <div class="l">
            我左邊
          </div>
          <div class="r">
            我右邊
          </div>
        </div>
      </body>
    </html>

5. 利用calc屬性和inline－block特色：

父元素設置（一樣是父元素包含左中右欄）： text-align:center; font-size: 0; letter-spacing: -4px; 左中右欄再重置： font-size: 16px; letter-spacing: normal; 左右欄固定寬度， html中元素順序爲：左，中，右，假設左右欄寬度和300px；中間攔： width:calc(100% - 300px); 百分比與固定寬度混合佈局使用，支持ie9+，注意＋－＊／號兩邊留空格 Demo：useCalcLayoutDemospa

6. 利用flex佈局：

flex佈局我認爲是最早進而方便的佈局，很是靈活不過內容也很多，只惋惜兼容ie10+。不在這多廢話，推薦阮一峯老師的教程：flex教程。父元素display:flex; ，左右兩欄設置flex-basis 預置寬度，中間欄flex-grow: 1;自動伸展。完活。 Demo：flexLayoutDemocode

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。