三栏布局

三栏布局

float

.wrapper {
        overflow: auto;
      }

      .left {
        float: left;
        width: 200px;
        background-color: aquamarine;
      }
      .right {
        float: right;
        width: 300px;
        background-color: chocolate;
      }

      .center {
        margin-left: 200px;
        margin-right: 300px;
        background-color: darkmagenta;
      }

HTML

注意中间部分的元素放在最后

<div class="wrapper" id="wrapper">
      <div class="left">左</div>
      <div class="right">右</div>
      <div class="center">
        中
        <h2>浮动布局</h2>
      </div>
    </div>

position

.wrapper {
        position: relative;
      }

      .left {
        position: absolute;
        left: 0;
        width: 200px;
        background-color: aquamarine;
      }
      .right {
        position: absolute;
        right: 0;
        width: 300px;
        background-color: chocolate;
      }

      .center {
        position: absolute;
        left: 200px;
        right: 300px;
        background-color: darkmagenta;
      }

HTML

<div class="wrapper" id="wrapper">
      <div class="left">左</div>
      <div class="center">
        中
        <h2>绝对定位</h2>
      </div>
      <div class="right">右</div>
    </div>

      .wrapper {
        position: relative;
      }

      .left {
        position: absolute;
        left: 0;
        width: 200px;
        background-color: aquamarine;
      }
      .right {
        position: absolute;
        right: 0;
        width: 300px;
        background-color: chocolate;
      }

      .center {
        margin-left: 200px;
        margin-right: 300px;
        background-color: darkmagenta;
      }

HTML

注意中间部分的元素放在最后

<div class="wrapper" id="wrapper">
      <div class="left">左</div>
      <div class="right">右</div>
      <div class="center">
        中
        <h2>浮动布局</h2>
      </div>
    </div>

flex 布局

.wrapper {
        display: flex;
      }

      .left {
        width: 200px;
        background-color: aquamarine;
      }
      .right {
        width: 300px;
        background-color: chocolate;
      }

      .center {
        flex: 1;
        background-color: darkmagenta;
      }

HTML

<div class="wrapper" id="wrapper">
      <div class="left">左</div>
      <div class="center">
        中
        <h2>绝对定位</h2>
      </div>
      <div class="right">右</div>
    </div>

grid 布局

.wrapper {
        display: grid;

        grid-template-columns: 200px 1fr/auto 300px;
      }

      .left {
        background-color: aquamarine;
      }
      .right {
        background-color: chocolate;
      }

      .center {
        background-color: darkmagenta;
      }

HTML

<div class="wrapper" id="wrapper">
      <div class="left">左</div>
      <div class="center">
        中
        <h2>绝对定位</h2>
      </div>
      <div class="right">右</div>
    </div>