CSS三欄佈局——多種方法詳解，比較兼容性

時間 2019-11-15

標籤 css 佈局多種方法詳解比較兼容性欄目 CSS 简体版

原文原文鏈接

題目:假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲300px，中間自適應.css

三欄佈局的5種方案

這是一道經典的面試題，下面記錄了css佈局的5種方法。html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三欄佈局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<!--5種解決方案-->
</body>

1. 浮動解決方案

<!-- 1. 浮動解決方案 -->
  <scetion class="layout float">
    <!-- 樣式 -->
    <style media="screen">
      .layout.float article div {
        min-height: 80px;
      }

      .layout.float .left {
        width: 300px;
        background-color: red;
        float: left;
      }

      .layout.float .center {
        background-color: yellow;
      }

      .layout.float .right {
        width: 300px;
        background-color: blue;
        float: right;
      }
    </style>

    <!-- 結構 -->
    <!-- 注意:結構中 右浮動的div必定要寫在 center 的前面,不然無效. -->
    <h2>三欄佈局</h2>
    <article class="left-ritgh-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h2>浮動解決方案</h2>
        1.這是三欄佈局的浮動解決方案；
        2.這是三欄佈局的浮動解決方案；
        3.這是三欄佈局的浮動解決方案；
        4.這是三欄佈局的浮動解決方案；
        5.這是三欄佈局的浮動解決方案；
        6.這是三欄佈局的浮動解決方案；
      </div>
    </article>
  </scetion>

2. 絕對定位解決方案

<!-- 2. 絕對定位解決方案 -->
  <section class="layout absolute">
    <!-- 樣式 -->
    <style>
      .layout.absolute article div {
        min-height: 80px;
        position: absolute;
      }

      .layout.absolute .left {
        width: 300px;
        background-color: red;
        left: 0;
      }

      .layout.absolute .center {
        background-color: yellow;
        left: 300px;
        right: 300px;
      }

      .layout.absolute .right {
        width: 300px;
        background-color: blue;
        right: 0;
      }
    </style>

    <!-- 結構 -->
    <h1>三欄佈局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>絕對定位解決方案</h2>
        1.這是三欄佈局的絕對定位解決方案；
        2.這是三欄佈局的絕對定位解決方案；
        3.這是三欄佈局的絕對定位解決方案；
        4.這是三欄佈局的絕對定位解決方案；
        5.這是三欄佈局的絕對定位解決方案；
        6.這是三欄佈局的絕對定位解決方案；
      </div>
      <div class="right"></div>
    </article>
  </section>

3. flexbox 解決方案

<!-- 3. flexbox解決方案 -->
  <section class="layout flexbox">
    <!-- 樣式 -->
    <style>
      /* flexbox解決方案在瀏覽器中顯示時被上面的絕對定位解決方案擋住了,設置一個margin-top */
      .layout.flexbox {
        margin-top: 110px;
      }

      /* 設置最低高度 */
      .layout.flexbox article div {
        min-height: 80px;
      }

      .layout.flexbox article {
        display: flex;
      }

      .layout.flexbox .left {
        width: 300px;
        background-color: red;
      }

      .layout.flexbox .center {
        /*center部分增加 使整行填充*/
        flex: 1;
        background-color: yellow;
      }

      .layout.flexbox .right {
        width: 300px;
        background-color: blue;
      }
    </style>

    <!-- 結構 -->
    <h1>三欄佈局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>flexbox解決方案</h2>
        1.這是三欄佈局的flexbox解決方案；
        2.這是三欄佈局的flexbox解決方案；
        3.這是三欄佈局的flexbox解決方案；
        4.這是三欄佈局的flexbox解決方案；
        5.這是三欄佈局的flexbox解決方案；
        6.這是三欄佈局的flexbox解決方案；
      </div>
      <div class="right"></div>
    </article>
  </section>

4. 表格佈局解決方案

<!-- 4. 表格佈局解決方案 -->
  <section class="layout table">
    <!-- 樣式 -->
    <style>
      .layout.table .left-center-right {
        width: 100%;
        min-height: 80px;
        display: table;
      }

      .layout.table .left-center-right>div {
        display: table-cell;
      }

      .layout.table .left {
        width: 300px;
        background-color: red;
      }

      .layout.table .center {
        background-color: yellow;
      }

      .layout.table .right {
        width: 300px;
        background-color: blue;
      }
    </style>

    <!-- 結構 -->
    <h1>三欄佈局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>表格佈局解決方案</h2>
        1.這是三欄佈局的表格佈局解決方案；
        2.這是三欄佈局的表格佈局解決方案；
        3.這是三欄佈局的表格佈局解決方案；
        4.這是三欄佈局的表格佈局解決方案；
        5.這是三欄佈局的表格佈局解決方案；
        6.這是三欄佈局的表格佈局解決方案；
      </div>
      <div class="right"></div>
    </article>
  </section>

5. 網格佈局解決方案

<!-- 5. 網格佈局解決方案 -->
  <section class="layout grid">
    <!-- 樣式 -->
    <style>
      .layout.grid .left-center-right {
        width: 100%;
        display: grid;
        /* 網格行高 */
        grid-template-rows: 100px;
        /* 網格列寬 */
        grid-template-columns: 300px auto 300px;
      }

      .layout.grid .left {
        background-color: red;
      }

      .layout.grid .center {
        background-color: yellow;
      }

      .layout.grid .right {
        background-color: blue;
      }
    </style>

    <!-- 結構 -->
    <h1>三欄佈局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>網格佈局解決方案</h2>
        1.這是三欄佈局的網格佈局解決方案；
        2.這是三欄佈局的網格佈局解決方案；
        3.這是三欄佈局的網格佈局解決方案；
        4.這是三欄佈局的網格佈局解決方案；
        5.這是三欄佈局的網格佈局解決方案；
        6.這是三欄佈局的網格佈局解決方案；
      </div>
      <div class="right"></div>
    </article>
  </section>

效果：

自適應（將瀏覽器窗口壓窄）的變化

將瀏覽器窗口壓窄，能夠看到變化。因爲上面的代碼中設置的高度是min-width，而不是設置的固定高度width，因此如今看到的也就是高度不固定的狀況。面試

5種佈局方案在高度不固定的狀況下呈現出不一樣的效果的分析

浮動解決方案中：center部分會被內容撐高並向兩邊擴充，兩邊盒子的大小不受影響。
絕對定位解決方案中：center部分會被內容撐高，不向兩邊擴充，兩邊盒子大小不受影響。
flexbox解決方案中：center部分會被內容撐高，而且兩邊的盒子與center高度始終保持一致。

這是由於在flex佈局中，align-items屬性默認爲stretch,若是設置爲：align-items: center;或align-items: start;或align-items: end;或其餘值，那麼就不會自動保持同樣高。參見：MDN: flex 佈局的基本概念瀏覽器

表格佈局解決方案中：center部分會被內容撐高，而且兩邊的盒子與center高度始終保持一致。
網格佈局解決方案中：盒子大小都不變化，文字直接超出center部分。

相關標籤/搜索

每日一句

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