双飞翼布局

Paste_Image.png

Paste_Image.png

• 第一步 分块

    
我是头
    

        
        

            
我是中间
                
我是中间
                
我是中间
                
我是中间
                
我是中间
                
我是中间
            
        
        
我是左边
        
我是右边
    
    
我是尾
```

- 第二步 中间部分CSS关键性布局

.article {
    background-color: green;
    height: 300px;
    /* 设置中间元素距离左边150 右边100*/
    /*padding-left: 150px;
    padding-right: 100px;*/
    /* 隐藏多余的*/
    overflow: hidden;
}

.article .left {
    background-color: blue;
    float: left;
    color: white;
    width: 150px;
    height: 16px;
    /* 发挥父边距的作用100%刚好把它顶出去 */
    margin-left: -100%;
    /* 圣杯布局 */
    /*position: relative;
    left: -150px;*/
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

.article .right {
    background-color: aquamarine;
    float: left;
    width: 100px;
    height: 16px;
    /* 距离设置为自己的宽负的即可 */
    margin-left: -100px;
    /* 圣杯布局需要设置的 */
    /*position: relative;*/
    /* 相对于右上角 所以负的往右移动 */
    /*right: -100px;*/
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

.article .middle {
    background-color: red;
    /* 首先实现中间快级元素并且靠左边漂浮 */
    float: left;
    /* 让width为100% 使其成为块级元素 */
    width: 100%;
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

.inner {
    margin-left: 150px;
    margin-right: 100px;
}```

doubleLayout.gif

所有代码

    
    
    



    
我是头
    

        
        

            
我是中间
                
我是中间
                
我是中间
                
我是中间
                
我是中间
                
我是中间
            
        
        
我是左边
        
我是右边
    
    
我是尾