04-双飞翼布局

圣杯布局和双飞翼布局其实本质是一样的,区别请看下面代码分析

一、 html结构:

    
    
    
    
    



    

        

            
中间内容
        
        
left
        
right
    

二、CSS样式

(1)定义容器样式

 body{
            padding: 0;
            margin: 0;
            text-align: center;
            height: 200px;
            line-height: 200px;
        }

        .container{
            min-width:400px;
            height:200px;
            background-color: blue;
        }
        .left,.right{
            width:200px;
            height:200px;
            background-color: green;
            float: left;
        }
        .main{
              width:100%;
              height:200px;
              background-color: red;
              float: left;
        }

在浏览器中的效果:

image.png

(2)为父容器container添加margin

.main-content{
          margin: 0 200px;
 }

image.png

(3).left的移动(重点)

.left{
            margin-left:-100%;
        }

image.png

(4).right的移动

.right{
            margin-left: -200px;
        }

image.png

不会直接移动到蓝色框和上面的.left是同样的原因。 接下来我们为.right添加margin-left:-200px的样式:

.right{
margin-left: -200px; position: relative; //新加样式
}

在浏览器中的效果:

image.png

所有实现代码

    
    
    
    
    



    

        

            
中间内容
        
        
left
        
right
    

喜欢的关注下公众号哦,每天都有新的博文推送哦

wechat.jpg