CSS 经典三列布局之双飞翼布局

双飞翼布局

双飞翼布局与圣杯布局细微区别

• 双飞翼布局比圣杯布局多了一个 main-inner标签
• 双飞翼布局不需要盒子定位
• 双飞翼布局是由内容main-inner盒子的maigin撑开

HTML结构

        

            
main
  //相比较圣杯布局对出来的内容盒子
        
        
left
        
right

1.png

• 同圣杯布局类似先给main宽度100%
• 三个盒子左浮动
• left盒子margin-left:-100%; right盒子margin-left:-200px(right盒子自身的宽度)
• 给内容盒子一个margin-left

 .container > div {
            float: left;
            height: 10vh;
        }
       .main {
            width: 100%;
            background-color: #DB5ACF;
        }
         .main-inner {
            margin-left:200px;
        }
                .left {
            width: 200px;
            background-color: #9FE444;
            margin-left: -100%;
        }

![Uploading 1_983217.png . . .]

• 同理给right盒子

 .right {
            width: 200px;
            background-color: #39A3CF;
            margin-left: -200px;  /* 不能用100% */
        }

2.png

附件

    
    
    


header

        

            
main
        
        
left
        
right

footer