乐趣区

css三栏布局实例第一篇5种方法实现三栏布局高度一致左右宽度一定中间宽度自适应

jiezi 
css 面试题：请用尽可能多的方法实现 css 三栏布局，高度一致，左右宽度一定，中间宽度自适应。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css 三栏布局 </title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }

      section {
        height: 100px;
        margin-bottom: 20px;
      }

      section div {height: 100px;}

      .left {background-color: aqua;}

      .mid {background-color: burlywood;}

      .right {background-color: coral;}
    </style>
  </head>

  <body>
    <p> 题目：假设高度已知，请写出三栏布局，其中左栏右栏各为 100，中间自适应。</p>
    <!-- 浮动布局 -->
    <section class="float">
      <style>
        .float-left {
          float: left;
          width: 100px;
        }

        .float-right {
          float: right;
          width: 100px;
        }
      </style>
      <article>
        <div class="left float-left"></div>
        <div class="right float-right"></div>
        <div class="mid float-mid"> 我是用的浮动 </div>
      </article>
    </section>
    <!-- flex 布局 -->
    <section class="flex">
      <style>
        .flex article {display: flex;}

        .flex-left {width: 100px;}

        .flex-right {width: 100px;}

        .flex-mid {flex: 1;}
      </style>
      <article>
        <div class="left flex-left"></div>
        <div class="mid flex-mid"> 我是用的 flexbox</div>
        <div class="right flex-right"></div>
      </article>
    </section>
    <!-- 绝对定位 -->
    <section class="position">
      <style>
        .position article{position: relative;}

        .position-left {
          position: absolute;
          left: 0;
          width: 100px;
        }

        .position-right {
          position: absolute;
          right: 0;
          width: 100px;
        }

        .position-mid {
          position: absolute;
          left: 100px;
          right: 100px;
        }
      </style>
      <article>
        <div class="left position-left"></div>
        <div class="right position-right"></div>
        <div class="mid position-mid">
          我是用的绝对定位
        </div>
      </article>
    </section>
    <!-- table 布局 -->
    <section class="table">
      <style>
        .table article {
          display: table;
          width: 100%;
        }

        .table-left {
          display: table-cell;
          width: 100px;
        }

        .table-right {
          display: table-cell;
          width: 100px;
        }

        .table-mid {display: table-cell;}
      </style>
      <article>
        <div class="left table-left"></div>
        <div class="mid table-mid"> 我是用的表格布局 </div>
        <div class="right table-right"></div>
      </article>
    </section>
    <!-- 网格布局 -->
    <section class="grid">
      <style>
        .grid article {
          display: grid;
          width: 100%;
          grid-template-rows: 100px;
          grid-template-columns: 100px auto 100px;
        }
      </style>
      <article>
        <div class="left grid-left"></div>
        <div class="mid grid-mid"> 我是用的网格布局 </div>
        <div class="right grid-right"></div>
      </article>
    </section>
    后文思考：<ul>
      <li>1. 各自优缺点 </li>
      <li>2. 去掉固定高度后有什么影响？</li>
      <li>3. 各自兼容性 </li>
    </ul>
  </body>
</html>

效果预览：

退出移动版