三欄布局之中間固定，左右兩欄自適應幾種方案

標簽：

Html/CSS Html5 CSS3

三栏布局，假定中间宽度固定为200px，左右两栏自适应
grid布局，请到最新chrome浏览器上运行体验

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>三栏布局之中间固定，左右两栏自适应</title>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }
      section.layout {
        margin-bottom: 50px;
        text-align: center;
        color: white;
      }
      .left {
        background-color: #65d;
      }
      .center {
        background-color: #f05;
      }
      .right {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <section class="layout flex">
      <!-- flex布局方案 -->
      <style>
        .layout.flex .page {
          display: flex;

        }
        .layout.flex .left, .layout.flex .right {
          flex: 1;
        }

        .layout.flex .center {
          width: 200px;
        }
      </style>
      <article class="page">
        <div class="left">左边自适应</div>
        <div class="center">flex布局-中间固定宽度部分</div>
        <div class="right">右边自适应</div>
      </article>
    </section>

    <section class="layout table">
      <!-- table 布局方案 -->
      <style>
        .layout.table .page {
          display: table;
          width: 100%;
        }
        .layout.table .page>div {
          display: table-cell;
        }
        .layout.table .center {
          width: 200px;
        }
      </style>
      <article class="page">
        <div class="left">左边自适应</div>
        <div class="center">table布局-中间固定宽度部分</div>
        <div class="right">右边自适应</div>
      </article>
    </section>

    <section class="layout grid">
      <!-- 网格布局方案 -->
      <style>
        .layout.grid .page {
          display: grid;
          grid-template-rows: 100%;
          grid-template-columns: auto 200px auto;
        }
      </style>
      <article class="page">
        <div class="left">左边自适应</div>
        <div class="center">
          grid布局-中间固定宽度部分
        </div>
        <div class="right">右边自适应</div>
      </article>
    </section>
  </body>
</html>

點擊查看更多內(nèi)容