頁面佈局

頁面佈局

高度已知左右固定中間自適應

---

• float佈局
  缺點：清除浮動的處理
  優點：兼容性好

<section class="layout float">
    <style>
      .layout.float .left-right-center div{
        height: 100px;
      }
      .layout.float .left{
        float: left;
        width: 200px;
        background: blue;
      }
      .layout.float .right{
        float: right;
        width: 200px;
        background: red;
      }
      .layout.float .center{
        background: green
      }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h1>內容標題</h1>
          <p>主要內容</p>
        </div>
    </article>   
  </section>

• 絕對定位
  缺點：下面子元素脫離文檔流，有效性差
  優點：快捷

<section class="layout absolute">
    <style>
      .layout.absolute .left-center-right>div{
        position: absolute;   
        height: 100px;     
      }
      .layout.absolute .left{
        width: 200px;
        left: 0;
        background: blue;
      }
      .layout.absolute .right{
        right: 0;       
        width: 200px;
        background: red;
      }
      .layout.absolute .center{
        left: 200px;     
        right:200px;
        background: green
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>內容標題</h1>
          <p>主要內容</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

• flexbox
  解決上述兩個缺點的，移動端很好的兼容

<section class="layout flex">
    <style>
      .layout.flex .left-center-right>div{
        height: 100px;
      }
      .layout.flex .left-center-right{
        display: flex;
      }
      .layout.flex .left{
        width: 200px;
        background: blue;
      }
      .layout.flex .right{     
        width: 200px;
        background: red;
      }
      .layout.flex .center{
        flex: 1;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>內容標題</h1>
          <p>flex</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

• table
  優點：兼容性好
  缺點：一個單元格影響其他單元格

<section class="layout table">
    <style>
      .layout.table .left-center-right{
        display: table;
        width: 100%;
        height: 100px;

      }
      .layout.table .left-center-right>div{
        display: table-cell;
      }
      .layout.table .left{
        width: 200px;
        background: blue;
      }
      .layout.table .right{     
        width: 200px;
        background: red;
      }
      .layout.table .center{
        background: green;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>內容標題</h1>
          表格
      </div>
      <div class="right"></div>
    </article>
  </section>

• grid
  優點：各種複雜佈局，代碼簡單

  <section class="layout grid">
    <style>
      .layout.grid .left-center-right{
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 200px auto 200px;
      }
      .layout.grid .left{
        background: blue;
      }
      .layout.grid .right{     
        background: red;
      }
      .layout.grid .center{
        background: green;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>內容標題</h1>
          網格
      </div>
      <div class="right"></div>
    </article>
  </section>