七种方法实现三栏布局

<!DOCTYPE html>
<html lang="zh">
<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 type="text/css">
    html * {
      margin: 0;
      padding: 0;
    }

    .layout article>div {
      height: 100px;
    }

    .layout .left {
      width: 100px;
      background: red;
    }

    .layout .right {
      width: 200px;
      background: blue;
    }

    .layout .center {
      background: green;
    }
  </style>
</head>

<body>
  <!--浮动布局-->
  <section class="layout float">
    <style type="text/css">
      .layout.float .left {
        float: left;
      }

      .layout.float .right {
        float: right;
      }
    </style>
    <h1>浮动布局</h1>
    <article>
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        浮动布局解决方案 浮动布局解决方案 浮动布局解决方案
      </div>
    </article>
  </section>

  <!--定位布局-->
  <section class="layout absolute">
    <style type="text/css">
      .layout.absolute article>div {
        position: absolute;
      }

      .layout.absolute .left {
        left: 0;
      }

      .layout.absolute .right {
        right: 0;
      }

      .layout.absolute .center {
        left: 100px;
        right: 200px;
      }
    </style>
    <h1>定位布局</h1>
    <article>
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        定位布局解决方案 定位布局解决方案 定位布局解决方案
      </div>
    </article>
  </section>

  <!--弹性布局-->
  <section class="layout flex">
    <style type="text/css">
      .layout.flex {
        margin-top: 100px;
      }

      .layout.flex article {
        display: flex;
      }

      .layout.flex .center {
        flex: 1;
      }
    </style>
    <h1>弹性布局</h1>
    <article>
      <div class="left"></div>
      <div class="center">
        弹性布局解决方案 弹性布局解决方案 弹性布局解决方案
      </div>
      <div class="right"></div>
    </article>
  </section>

  <!--表格布局-->
  <section class="layout table">
    <style type="text/css">
      .layout.table article {
        display: table;
        width: 100%;
      }

      .layout.table article>div {
        display: table-cell;
      }
    </style>
    <h1>表格布局</h1>
    <article>
      <div class="left"></div>
      <div class="center">
        表格布局解决方案 表格布局解决方案 表格布局解决方案
      </div>
      <div class="right"></div>
    </article>
  </section>

  <!--网格布局-->
  <section class="layout grid">
    <style type="text/css">
      .layout.grid article {
        display: grid;
        grid-template-columns: 100px auto 200px;
      }
    </style>
    <h1>网格布局</h1>
    <article>
      <div class="left"></div>
      <div class="center">
        网格布局解决方案 网格布局解决方案 网格布局解决方案
      </div>
      <div class="right"></div>
    </article>
  </section>

  <!--双飞翼布局-->
  <section class="layout wing">
    <style type="text/css">
      .layout.wing article>div{
        float: left;
      }
      .layout.wing .center{
        width: 100%;
      }
      .layout.wing .main{
        margin-left: 100px;
        margin-right: 200px;
      }
      .layout.wing .left{
        margin-left: -100%;
      }
      .layout.wing .right{
        margin-left: -200px;
      }
    </style>
    <h1>双飞翼布局</h1>
    <article>
      <div class="center">
        <div class="main"> 双飞翼布局解决方案 双飞翼布局解决方案 双飞翼布局解决方案</div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </article>
  </section>

  <!--圣杯布局-->
  <section class="layout grial">
    <style type="text/css">
      .layout.grial article{
        margin-left: 100px;
        margin-right: 200px;
      }
        .layout.grial article>div{
          position: relative;
          float: left;
        }
        .layout.grial .center{
          width: 100%;
        }
        .layout.grial .left{
          margin-left: -100%;
          left: -100px;
        }
        .layout.grial .right{
          margin-left: -200px;
          right: -200px;
        }
    </style>
    <h1>圣杯布局</h1>
    <article>
        <div class="center">
          圣杯布局解决方案 圣杯布局解决方案 圣杯布局解决方案
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>
  </section>

</body>
</html>
七种方法实现三栏布局

猜你喜欢
