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

在浏览器中的效果:


04-双飞翼布局_第1张图片
image.png

(2)为父容器container添加margin


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

04-双飞翼布局_第2张图片
image.png

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

.left{
            margin-left:-100%;
        }
04-双飞翼布局_第3张图片
image.png

(4).right的移动

.right{
            margin-left: -200px;
        }
04-双飞翼布局_第4张图片
image.png

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

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

在浏览器中的效果:


04-双飞翼布局_第5张图片
image.png

所有实现代码




    
    
    
    Document
    



    
中间内容
left
right

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


04-双飞翼布局_第6张图片
wechat.jpg

你可能感兴趣的:(04-双飞翼布局)