(布局)题目: 假设高度为100px,请写出三栏布局,左侧300

2019-01-26 本文已影响0人冰冰啦

1.浮动布局

 <section class="layout float">
    <style>
      .layout.float .left-center-right .left{
        float: left;
        width: 300px;
        background: green;
      }
      .layout.float .left-center-right .right{
        float: right;
        width: 300px;
        background: blue;
      }
      .layout.float .left-center-right .center{
        background: red;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">浮动布局</div>
    </article>
  </section>

2.绝对定位布局

  <!-- 定位布局 -->
  <section class="layout position">
    <style>
      .layout.position .left-center-right div{
        position: absolute;
      }
      .layout.position .left{
        width: 300px;
        left: 0;
        background: green;
      }
      .layout.position .center{
        left: 300px;
        right: 300px;
        background: red;
      }
      .layout.position .right{
        right: 0;
        width: 300px;
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">绝对定位</div>
      <div class="right"></div>
    </article>
  </section>

3.flex布局

  <!-- flex布局 -->
  <section class="layout flex" style="margin-top: 120px;">
    <style>
      .layout.flex .left-center-right{
        display: flex;
      }
      .layout.flex .left{
        width: 300px;
        background: green;
      }
      .layout.flex .center{
        flex: 1;
        background: red;
      }
      .layout.flex .right{
        width: 300px;
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">flex布局</div>
      <div class="right"></div>
    </article>
  </section>

4.表格布局

  <!-- 表格布局 -->
  <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: 300px;
        background: green;
      }
      .layout.table .center{
        background: red;
      }
      .layout.table .right{
        background: blue;
        width: 300px;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">表格布局</div>
      <div class="right"></div>
    </article>
  </section>

5.grid布局

  <!-- grid布局 -->
  <section class="layout grid">
    <style>
      .layout.grid .left-center-right{
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
      }
      .layout.grid .left{
        background: green;
      }
      .layout.grid .center{
        background: red;
      }
      .layout.grid .right{
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">grid布局</div>
      <div class="right"></div>
    </article>
  </section>

追问1: 中间自适应的部分超出容器高度会怎么样?