首页 > 代码库 > html\css --- 双飞翼布局

html\css --- 双飞翼布局

总结一下双飞翼布局吧,这个比较经典的布局笔试面试有可能会考。

先把html贴上来

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>双飞翼布局</title>
    <link rel="stylesheet" href="http://www.mamicode.com/test.css">
</head>
<body>
    <div class="wrap">
        <div id="main">
            <div id="mainIN">
                main
            </div>
        </div>
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
</body>
</html>

双飞翼的思路如下:

1、将main的width设为100%,填满全局;

2、设left的width为30%,让left覆盖main的左30%;

3、设right的width为20%,让right覆盖right的右20%;

4、让mainIN的左右边距分别为30%,20%;

5、双飞翼成功,最后显示的是left、mainIN、right三部分;

从其思路能看出来实现双飞翼的要点有两个,一是如何让left和right覆盖main的左右;二是要让mainIN空出左右边距;

这样我再贴出来css代码大家看起来就比较明了了

#left,#main,#right{
    height: 200px;
    float: left;
}
#main{
    background-color: blue;
    width:100%;
}
#left{
    background-color: orange;
    width:30%;
    margin-left: -100%;
}
#right{
    background-color: red;
    width:20%;
    margin-left: -20%;
}
#mainIN{
    margin: 0 20% 0 30%;
}

简单明了,再说一遍要点:

1、利用float:left让三块浮动,让这三块有并排的可能;

2、利用margin-left:-x%;让left和right移到上一行与main同行;

3、margin: 0 20% 0 30%;让mainIN空出main的左右部分;

4、最后显示的三部分为left、mainIN、right;

思路记好就行了,代码并不重要。

html\css --- 双飞翼布局