首页 > 代码库 > 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 --- 双飞翼布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。