三欄佈局的幾種方式

時間 2019-11-10

標籤佈局幾種方式简体版

原文原文鏈接

　　這裏介紹幾種三欄佈局的實現方式，最終目的都是左右兩邊固定寬度，中間的自適應。 html

　　最終效果以下：git

1、流式佈局github

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>流式佈局</title>
  <style>
    * {
      margin: 0;
    }
    div.wrap {
      margin-top: 10px;
      width: 100%;
    }
    div.left {
      float: left;
      width: 300px;
      height: 400px;
      background: pink;
    }
    div.right {
      float: right;
      width: 200px;
      height: 400px;
      background: yellow; 
    }
    div.main {
      height: 400px;
      margin: 0 210px 0 310px;
      background: blue;
    }
  </style>
</head>
<body>
    <div class="wrap">
      <div class="left"></div>
      <div class="right"></div>
      <div class="main"></div>
    </div>
</body>
</html>

優勢：這是比較正常的思路，兩邊浮動，中間利用margin。佈局

缺點：主題部分不能優先加載，體驗很差。spa

二、 BFC三欄佈局code

利用BFC元素不和浮動元素重疊的原理。htm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC三欄佈局</title>
  <style>
  * {
    margin: 0;
  }
  div.wrap {
    margin-top: 10px;
    width: 100%;
  }
  div.left {
    float: left;
    width: 300px;
    height: 400px;
    margin-right: 10px;
    background: pink;
  }
  div.right {
    float: right;
    width: 200px;
    height: 400px;
    margin-left: 10px;
    background: yellow; 
  }
  div.main {
    height: 400px;
    overflow: hidden;
    background: blue;
  }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>
</body>
</html>

優勢：同上。blog

缺點：同上。get

三、雙飛翼佈局it

參考：那些年，奇妙的聖盃與雙飛翼，還有負邊距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>雙飛翼佈局</title>
  <style>
    * {
      margin: 0;
    }
    div.wrap {
      float: left;
      width: 100%;
    }
    div.main {
      height: 400px;
      margin-left: 310px;
      margin-right: 210px;
      background: blue;
    }
    div.left {
      float: left;
      height: 400px;
      width: 300px;
      background: pink;
      margin-left: -100%;
    }
    div.right {
      float: left;
      height: 400px;
      width: 200px;
      background: yellow;
      margin-left: -200px;
    }

  </style>
</head>
<body>
  <div class="wrap">
    <div class="main"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</body>
</html>

優勢： mian部分優先加載，體驗不錯。

缺點：結構相對複雜，無語義化。

四、聖盃佈局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>聖盃佈局</title>
  <style>
    * {
      margin: 0;
    }
    div.wrap {
      margin-left: 310px;
      margin-right: 210px;
    }
    div.main {
      float: left;
      width: 100%;
      height: 400px;
      background: blue;
    }
    div.left {
      float: left;
      width: 300px;
      height: 400px;
      margin-left: -100%;
      position: relative;
      left: -320px;
      background: pink;
    }
    div.right {
      float: left;
      width: 200px;
      height: 400px;
      margin-left: -200px;
      position: relative;
      right: -220px;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

優勢：結構簡單，主體提早加載。

缺點：無。

五、table三欄佈局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>table三欄佈局</title>
  <style>
    * {
      margin: 0;
    }
    div.wrap {
      display: table;
      width: 100%;
    }
    div.left,
    div.main,
    div.right {
      display: table-cell;
    }

    div.left {
      width: 300px;
      height: 400px;
      background: pink;
    }
    div.mian {
      background: blue;
      height: 400px;
    }
    div.right {
      width: 200px;
      height: 400px;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="mian"></div>
    <div class="right"></div>
  </div>
</body>
</html>

優勢：簡單易實現。

缺點：沒法設置間距。

六、絕對定位三欄佈局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>絕對定位三欄佈局</title>
  <style>
    * {
      margin: 0;
    }
    div.wrap {
      position: relative;
    }
    div.main {
      height: 400px;
      margin: 10px 210px 0 310px;
      background: blue;
    }
    div.left {
      position: absolute;
      width: 300px;
      height: 400px;
      top: 0;
      left: 0;
      background: pink;
    }
    div.right {
      position: absolute;
      width: 200px;
      height: 400px;
      top: 0;
      right: 0;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>