CSS: 三栏布局

三列布局，中间宽度自适应，两边定宽；
中间栏要在浏览器中优先展示渲染；
允许任意列的高度最高；

1. 绝对定位

原理就是将左右两边的元素设置为绝对定位，中间的元素设置其左右的margin值为左右两个元素的宽度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三栏布局</title>
  <style>
    #container {
      position: relative;
      height: 500px;
      margin: 0 auto;
      background-color: gold;
    }

    .column {
      position: absolute;
      top: 0;
      height: 100%;
    }

    #center {
      margin: 0 150px 0 200px;
      background-color: hotpink;
      height: 100%;
    }

    #left {
      left: 0;
      width: 200px;
      background-color: royalblue;
    }

    #right {
      right: 0;
      width: 150px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="center">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
  </div>
</body>

</html>

2. 浮动+负边距

原理就是将三个元素都设置为左浮动，但是元素位置是中左右，然后分别设置左右的元素的宽度和边距，最后再在中间元素上加一个子元素，并将其左右边距设置成左右元素的宽度，这是最重要的一步，不然中元素会被左右元素盖住一部分。

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>三栏布局</title>
  <style type="text/css">
    .container {
      min-width: 700px;
    }

    .middle {
      float: left;
      width: 100%;
      height: 300px;
      text-align: center;
      background-color: #ffd36a;
    }

    .sub {
      margin: 0 200px;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      margin-left: -100%;
      background-color: #ff63bd;
    }

    .right {
      float: left;
      width: 200px;
      height: 300px;
      margin-left: -200px;
      background-color: #a2ff95;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="middle">
      <div class="sub">
        cjois hsheio ere fhwioefhoi wgwoigh wjw popjf fnoqi feribv ehfoih waidn howeidw efwheofhi qfqiwoh qfwbfwi fuiwe
        fgguwdhq fwebf weuhfw egifwiygw gwhow eifhnv whiohweowbvwe
      </div>
    </div>
    <div class="left">
      <h3>left</h3>
    </div>
    <div class="right">
      <h3>right</h3>
    </div>
    <div>
</body>

</html>

3. 浮动 + 超出隐藏

原理是分别将左右元素设置为浮动，因为设置为浮动回事元素脱离文档流，是父容器高度塌陷，而overflow：hidden可以清除浮动，所以可以在中元素中设置overflow:hidden来清除浮动，使三者显示在一行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三栏布局</title>
  <style>
    .container {
      min-width: 700px;
      height: 500px;
    }
    .left {
      float: left;
      width: 200px;
      background-color: violet;
    }

    .right {
      float: right;
      width: 200px;
      background-color: violet;
    }

    .middle {
      overflow: hidden;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="middle">nvois hvsh ifho shfo fafiha foihafh aoifhi ogheiof ewhieofhw vni soehios hci ciosh hisohfos fsoief hsofhos hsiod fheiofh soifh dsofhid sfhis vd</div>
  </div>
</body>

4. flex布局

原理是将父容器设置为display:flex 可以使子容器排在同一行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三栏布局</title>
  <style>
    .container {
      display: flex;
    }

    .left {
      flex: 0 0 100px;
      background-color: #f00;
    }

    .main {
      flex: 1;
      background-color: #0f0;
    }

    .right {
      flex: 0 0 200px;
      background-color: #00f;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">左侧栏</div>
    <div class="center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates molestias consequatur facere
      aperiam distinctio debitis in voluptatum quas blanditiis culpa illo minus accusantium atque quaerat unde,
      architecto odit! Itaque, eos.</div>
    <div class="right">右侧栏</div>
  </div>
</body>
</html>

5. 网格布局

设置网格布局，并且设置grid-template-columns可以控制有几列，以及每列的宽度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三栏布局</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 100px auto 200px;
    }

    .left {
      background-color: #f00;
    }

    .right {
      background-color: #00f;
    }

    .main {
      background-color: #0f0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left">左侧栏</div>
    <div class="center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis corporis, neque odio at, saepe
      unde officiis nesciunt deleniti quidem delectus necessitatibus reiciendis nulla. Praesentium voluptates,
      perspiciatis natus fuga dicta tempora!</div>
    <div class="right">右侧栏</div>
  </div>
</body>

</html>