品字布局

relative 定位

/* css部分： */
    div
        { 
            width:100px; 
            height:100px;
        }
    .div1
        { 
            margin:auto;
            background:red; 
        }
    .div2
        {   
            background:blue;
            float:left; 
            margin-left:50%; 
            position:relative; 
            left:-100px;
        }
    .div3
        { 
            background:green; 
            float:left; 
            position:relative; 
            left:-100px;
        }
        
<!-- html部分 -->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

Translate

/* css部分： */
          .div1
          {
              width: 100px;
              height: 100px;
              background-color: red;
              margin: auto;
             
          }
          .div2
          {
              width: 100px;
              height: 100px;
              background-color: blue;
              float: left;
              margin-left:50%;
              transform: translate(-100%); 
          }
          .div3
          {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
            transform: translate(-100%);
          }

<!-- html部分 -->
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>

三栏布局

绝对布局

/* css部分： */
    body,html
    {
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    /* 左右绝对定位 */
    .left 
    {
     position: absolute;
     background: pink;
     height: 100%;
     width: 200px;
    }
    .right
    {   right: 0%;
        position: absolute;
        background: purple;
        height: 100%;
        width:200px
    }
    .main
    {
        margin: 0px 200px 0px 200px ;
        height: 100%;
        background: greenyellow;
    }
    
<!-- html部分 -->
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>

圣杯布局

/* css部分： */
    body,html
    {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    body
    {
        padding-left: 200px;
        padding-right:200px;
    }
    
    .left 
    {
        background: greenyellow;
        width: 200px;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -200px;
        height: 100%;
    }
    
    .main
    {
        background: pink;
        width: 100%;
        height: 100%;
        float: left;
    }
    .right
    {   
        background: red;
        width: 200px;
        height: 100%;
        float: left;
        margin-left: -200px;
        position: relative;
        right: -200px; 
    }

<!-- html部分 -->
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>

双飞翼布局

/* css部分： */
    body,html
    {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    
    .inner
    {
        margin-left: 200px;
        margin-right: 200px;
    }
    
    .left 
    {
        background: greenyellow;
        width: 200px;
        float: left;
        margin-left: -100%;
        height: 100%;
    }
    
    .main
    {
        background: pink;
        width: 100%;
        height: 100%;
        float: left;
    }
    .right
    {   
        background: red;
        width: 200px;
        height: 100%;
        float: left;
        margin-left: -200px;
        position: relative;
    }
    
<!-- html部分 -->
<div class="main">
    <div class="inner">
       
    </div>
</div>
<div class="left"></div>
<div class="right"></div>