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

html\css --- 双飞翼布局

2024-09-07 21:17:57   224人阅读

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

先把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 --- 双飞翼布局


联系
我们