三栏布局

浮动布局

  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>

flexbox 布局

  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 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>

网格布局

  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>

未知宽高元素水平垂直居中

  1. <div class="father">
  2.   <div class="son"></div>
  3. </div>
  5. //第一种
  6. <style>
  7.   .father {
  8.     position: relative;
  9.     width: 500px;
  10.     height: 500px;
  11.     background-color: red;
  12.   }
  13.   .son {
  14.     position: absolute;
  15.     margin: auto;
  16.     top: 0;
  17.     left: 0;
  18.     bottom: 0;
  19.     right: 0;
  20.     width: 300px;
  21.     height: 300px;
  22.     background-color: blue;
  23.   }
  24. </style>
  26. //第二种
  27. <style>
  28.   .father {
  29.     position: relative;
  30.   }
  31.   .son {
  32.     margin: auto;
  33.     position: absolute;
  34.     top: 50%;
  35.     left: 50%;
  36.     transform: translate(-50%, -50%);
  37.   }
  38. </style>
  40. //第三种
  41. <style>
  42.   .father {
  43.     display: -webkit-flex;
  44.     align-items: center;
  45.     justify-content: center;
  46.   }
  47.   .son {
  48.     margin: auto;
  49.   }
  50. </style>
  52. //第四种，用表格布局
  53. <div class="pe">
  54.   <div class="he">
  55.     <div class="she"></div>
  56.   </div>
  57. </div>
  58. <style>
  59.   .pe {
  60.     display: table;
  61.     width: 50%;
  62.     height: 30%;
  63.     position: absolute;
  64.   }
  65.   .he {
  66.     display: table-cell;
  67.     vertical-align: middle;
  68.     text-align: center;
  69.   }
  70.   .she {
  71.     width: 50%;
  72.     height: 30%;
  73.     display: inline-block;
  74.   }
  75. </style>
  77. //第五种，行内块元素
  78. <div class="wrap">
  79.   <b class="vamp"></b>
  80.   <div class="test">行内块元素</div>
  81.   <div>
  82.     <style>
  83.       .vamp{
  84.         width:0；
  85.         height:100%;
  86.         vertical-align:middle;
  87.       }
  88.       .test{
  89.         background:"blue";
  90.         display:inline-block;
  91.       }
  92.     </style>
  93.   </div>
  94. </div>