Table布局

最早的布局方式，通过table元素进行页面布局，页面中有大量的table元素，难以开发维护。

浮动布局

  1. <section class="layout float">
  2.   <style media="screen">
  3.     .layout.float .left {
  4.       float: left;
  5.       width: 300px;
  6.       background: red;
  7.     }
  8.     .layout.float .center {
  9.       background: yellow;
  10.     }
  11.     .layout.float .right {
  12.       float: right;
  13.       width: 300px;
  14.       background: blue;
  15.     }
  16.   </style>
  17.   <h1>三栏布局</h1>
  18.   <article class="left-right-center">
  19.     <div class="left"></div>
  20.     <div class="right"></div>
  21.     <div class="center">
  22.       <h2>浮动解决方案</h2>
  23.       1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
  24.       3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
  25.       5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
  26.     </div>
  27.   </article>
  28. </section>

绝对布局

  1. <section class="layout absolute">
  2.   <style>
  3.     .layout.absolute .left-center-right > div {
  4.       position: absolute;
  5.     }
  6.     .layout.absolute .left {
  7.       left: 0;
  8.       width: 300px;
  9.       background: red;
  10.     }
  11.     .layout.absolute .center {
  12.       left: 300px;
  13.       right: 300px;
  14.       background: yellow;
  15.     }
  16.     .layout.absolute .right {
  17.       right: 0;
  18.       width: 300px;
  19.       background: blue;
  20.     }
  21.   </style>
  22.   <h1>三栏布局</h1>
  23.   <article class="left-center-right">
  24.     <div class="left"></div>
  25.     <div class="center">
  26.       <h2>绝对定位解决方案</h2>
  27.       1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
  28.       3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
  29.       5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
  30.     </div>
  31.     <div class="right"></div>
  32.   </article>
  33. </section>

表格布局

  1. <section class="layout table">
  2.   <style>
  3.     .layout.table .left-center-right {
  4.       width: 100%;
  5.       height: 100px;
  6.       display: table;
  7.     }
  8.     .layout.table .left-center-right > div {
  9.       display: table-cell;
  10.     }
  11.     .layout.table .left {
  12.       width: 300px;
  13.       background: red;
  14.     }
  15.     .layout.table .center {
  16.       background: yellow;
  17.     }
  18.     .layout.table .right {
  19.       width: 300px;
  20.       background: blue;
  21.     }
  22.   </style>
  23.   <h1>三栏布局</h1>
  24.   <article class="left-center-right">
  25.     <div class="left"></div>
  26.     <div class="center">
  27.       <h2>表格布局解决方案</h2>
  28.       1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
  29.       3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
  30.       5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
  31.     </div>
  32.     <div class="right"></div>
  33.   </article>
  34. </section>

Flex布局

  1. <section class="layout flexbox">
  2.   <style>
  3.     .layout.flexbox {
  4.       margin-top: 110px;
  5.     }
  6.     .layout.flexbox .left-center-right {
  7.       display: flex;
  8.     }
  9.     .layout.flexbox .left {
  10.       width: 300px;
  11.       background: red;
  12.     }
  13.     .layout.flexbox .center {
  14.       flex: 1;
  15.       background: yellow;
  16.     }
  17.     .layout.flexbox .right {
  18.       width: 300px;
  19.       background: blue;
  20.     }
  21.   </style>
  22.   <h1>三栏布局</h1>
  23.   <article class="left-center-right">
  24.     <div class="left"></div>
  25.     <div class="center">
  26.       <h2>flexbox解决方案</h2>
  27.       1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
  28.       3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
  29.       5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
  30.     </div>
  31.     <div class="right"></div>
  32.   </article>
  33. </section>

网格布局

  1. <section class="layout grid">
  2.   <style>
  3.     .layout.grid .left-center-right {
  4.       width: 100%;
  5.       display: grid;
  6.       grid-template-rows: 100px;
  7.       grid-template-columns: 300px auto 300px;
  8.     }
  9.     .layout.grid .left-center-right > div {
  10.     }
  11.     .layout.grid .left {
  12.       width: 300px;
  13.       background: red;
  14.     }
  15.     .layout.grid .center {
  16.       background: yellow;
  17.     }
  18.     .layout.grid .right {
  19.       background: blue;
  20.     }
  21.   </style>
  22.   <h1>三栏布局</h1>
  23.   <article class="left-center-right">
  24.     <div class="left"></div>
  25.     <div class="center">
  26.       <h2>网格布局解决方案</h2>
  27.       1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
  28.       3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
  29.       5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
  30.     </div>
  31.     <div class="right"></div>
  32.   </article>
  33. </section>