實現三欄佈局5種方式

時間 2021-06-18

標籤 html 前端面試工具佈局學習 flex spa code 欄目 HTML 简体版

原文原文鏈接

前言

前端開發中，佈局是前端基礎的內容，而其中三欄佈局在實際開發和麪試中最多見，三欄佈局是指中間自適應兩邊固定寬，而咱們常常使用的淘寶首頁（pc端）就是典型的三欄佈局實現的。下面總結了五種三欄佈局方式，但願本身學習總結的同時對你們有所幫組。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>Layout</title>
  <style>
    .left {
      height: 150px;
      width: 300px;
      float: left;
      background: red;
    }
    .center {
      height: 150px;
      background: blue;
    }
    .right {
      width: 300px;
      height: 150px;
      float: right;
      background: yellow;
    }
  </style>
</head>
<body>
 <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
</body>
</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>Layout</title>
  <style>
    .left {
      position: absolute;
      height: 150px;
      width: 300px;
      left: 0;
      background: red;
    }
    .center {
      position: absolute;
      height: 150px;
      left: 300px;
      right: 300px;
      background: blue;
    }
    .right {
      position: absolute;
      right: 0;
      width: 300px;
      height: 150px;
      background: yellow;
    }
  </style>
</head>
<body>
 <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>
</html>

絕對定位佈局優勢:快捷以及設置簡單，並且也不容易出問題。
絕對定位佈局缺點:容器脫離了文檔流，後代元素也脫離了文檔流，高度未知的時候，會有問題，這就致使了這種方法的有效性和可以使用性是比較差的。

三、Flex佈局

<!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>Layout</title>
  <style>
    .container {
      display: flex;
    }
    .left {
      order: 1;
      width: 300px;
      background: red;
    }
    .center {
      flex: 1;
      order: 2;
      height: 150px;
      background: blue;
    }
    .right {
      width: 300px;
      order: 3;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="container">
     <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

須要注意要將中間塊放在前面，經過order來控制位置，實際高度會根據內容自適應，三欄高度統一。工具

Flex佈局的優勢：在移動端比較常見，佈局靈活，兼容性也還能夠，基本能知足大多數需求。
Flex佈局的缺點: IE10纔開始支持

四、Grid佈局

<!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>Layout</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 300px auto 300px;
      grid-template-rows: 150px;
      width: 100%;
    }
    .left {
      background: red;
    }
    .center {
      background: blue;
    }
    .right {
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>
</html>

Grid佈局優勢:建立網格佈局最強大和最簡單的工具。實際高度會根據內容自適應，三欄高度統一。
Grid佈局缺點：惟一的缺點就是兼容性不太好。

五、表格佈局

<!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>Layout</title>
  <style>
    .container {
      display: table;
      height: 150px;
      width: 100%;
    }
    .left {
      display: table-cell;
      width: 300px;
      background: red;
    }
    .center {
      display: table-cell;
      background: blue;
    }
    .right {
      width: 300px;
      display: table-cell;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>
</html>

表格佈局優勢：兼容性很好，在Flex佈局不兼容的時候（通常狀況下不多不兼容），能夠嘗試表格佈局。當內容溢出時會自動撐開父元素。佈局

表格佈局缺點:學習