三欄佈局常見方案

時間 2019-11-16

標籤佈局常見方案简体版

原文原文鏈接

三欄佈局(兩邊固定，中間自適應) 經常使用方案及演變過程

1. 浮動方式:

實現關鍵點: 要把中間放在左右塊的後面，而後左右設置左右浮動便可。

優勢: 簡單

缺點: 中間 main 不能清除浮動，寬度較小布局混亂

代碼javascript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>浮動實現三欄佈局</title>
    <style>
      .header {
        width: 100%;
        height: 200px;
        background-color: black;
      }
      .footer {
        width: 100%;
        height: 200px;
        background-color: black;
      }
      .left {
        float: left;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }
      .right {
        float: right;
        width: 300px;
        height: 300px;
        background-color: blue;
      }
      .center {
        background-color: blueviolet;
        margin: 0 310px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="wrapper">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

2. 絕對定位方式:

實現關鍵點：左右絕對定位中間用 margin 撐開

優勢：容易理解和上手

缺點：瀏覽器寬度較小會出現重疊

代碼css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>絕對定位實現三欄佈局</title>
    <style>
      .header {
        width: 100%;
        height: 200px;
        background-color: black;
      }
      .footer {
        width: 100%;
        height: 200px;
        background-color: black;
      }
      /* 變化部分 */
      .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }
      .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
        height: 300px;
        background-color: blue;
      }
      .center {
        background-color: blueviolet;
        margin: 0 310px;
        height: 300px;
      }
      .wrapper {
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="wrapper">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

停，要開始講道理了

生產改進要求

中間欄優先渲染、運行任意列高度最高html

陷入沉思

中間欄優先，浮動是掛了，絕對定位還能搶救下，先看看國外提出的聖盃佈局和淘寶玉伯的雙飛翼佈局前端

聖盃佈局

第一版

實現要點:

1.子元素都左浮動，
2.設置主體部分寬度爲 100%
3.設置左邊 margin-left 爲-100%讓其換到上一行，右邊 margin-left 爲負自己寬度
4.主容器設置左右 padding
5.設置三部分都爲相對定位，將兩部分移動到兩側留白，left 和 right 設置爲-寬度java

缺點：聖盃破碎當中間塊寬度小於左邊塊時，佈局錯亂

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>聖盃佈局</title>
    <style>
      .header {
        width: 100%;
        height: 200px;
        background-color: black;
      }
      .footer {
        width: 100%;
        height: 200px;
        background-color: black;
      }
      /* 變化部分 */
      .left {
        position: relative;
        left: -310px;
        float: left;
        margin-left: -100%;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }
      .right {
        position: relative;
        right: -310px;
        float: left;
        margin-left: -300px;
        width: 300px;
        height: 300px;
        background-color: blue;
      }
      .center {
        float: left;
        background-color: blueviolet;
        height: 300px;
        width: 100%;
      }
      .wrapper {
        padding: 0 320px;
      }
      .clearfix::after {
        display: block;
        content: ' ';
        height: 0;
        visibility: hidden;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="wrapper clearfix">
      <div class="center"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

絕對定位版

實現要點：把前面普通版的 main 移到主容器最前便可

缺點：高度不可控，會沒法支撐起 wrapper，寬度較小出現覆蓋

雙飛翼佈局

實現要點：

與聖盃處理不一樣之處在於中間被遮擋內容的處理,在 main 中包裹一個 div 設置左右 margin 來處理git

優勢：比原始聖盃佈局寫法要簡單，解決了聖盃破碎和絕對定位高度支撐問題

缺點：增長了一個 div，增長了渲染成本

容許任意列最高

代碼程序員

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>雙飛翼佈局</title>
    <style>
      .header {
        width: 100%;
        height: 200px;
        background-color: black;
      }
      .footer {
        width: 100%;
        height: 200px;
        background-color: black;
      }
      /* 變化部分 */
      .left {
        float: left;
        margin-left: -100%;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }
      .right {
        float: left;
        margin-left: -300px;
        width: 300px;
        height: 300px;
        background-color: blue;
      }
      .center {
        float: left;
        background-color: blueviolet;
        height: 300px;
        width: 100%;
      }
      .content {
        margin: 0 310px;
        height: 300px;
        background-color: brown;
      }
      .wrapper {
      }
      .clearfix::after {
        display: block;
        content: ' ';
        height: 0;
        visibility: hidden;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="wrapper clearfix">
      <div class="center">
        <div class="content">

        </div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

flex 版

實現要點：利用 flex 的 order 屬性移動

優勢: 集雙飛翼的優勢一身，還要簡單的多

缺點：兼容性！兼容性！兼容性！

代碼github

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>flex終極版</title>
    <style>
      .header {
        width: 100%;
        height: 200px;
        background-color: black;
      }
      .footer {
        width: 100%;
        height: 200px;
        background-color: black;
      }
      /* 變化部分 */
      .left {
        order: -1;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }
      .right {
        width: 300px;
        height: 300px;
        background-color: blue;
      }
      .center {
        background-color: blueviolet;
        height: 300px;
        flex: 1;
      }
      .wrapper {
        display: flex;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="wrapper">
      <div class="center">
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

總結

我習慣了對一個問題的發展過程進行了解，發掘每部分解決方案的優勢和缺點，固然，文章是有意編排了順序，是想你們有了一個從不完善的版本到完善版本過渡，也不能說拿到最大的錘子，就是幹，程序員要作的就是在當前情況選擇一個合適的方案。segmentfault

想要點小星星

學習前端已經半年有餘了，css方面可以認識到張鑫旭大佬，js方面有< <你不知道的javascript> >這位良師，還有阮一峯大佬的ES6，讓我瞭解到前端的宿命就是精通html、css、js三門語言，任重而道遠，在讀了張大大的文章後有感，平時遇到問題，本身去嘗試，主動犯錯，瞭解不同的深度，而後把知識點經過本身的腦子轉換一下，重組爲本身的東西，更重要的是，我不是一個無私的利他主義者，我仍是須要一些鼓勵，更有動力輸出文章，但願能有一顆小星星呀。瀏覽器