经典的双飞翼布局
2017-07-24 本文已影响0人
人才辈出阿卡姆
双飞翼布局是在圣杯布局的基础上进行的优化。好处是：去掉了圣杯布局中的定位，只使用浮动和负的margin-left就实现了相同效果，缺点是所有的页面元素都要进行浮动的设置。
将middle区域抽离出来，使用一个父容器包裹，父容器宽度100%，middle设置margin-left:200px;
margin-right:-220px;留出空白区域。类似圣杯的父容器padding。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: #ccc;
text-align:center;
}
header{
height:50px;
background-color:pink;
line-height:50px;
float: left;
width: 100%;
}
.container,.left,.right{
float: left;
min-height: 300px;
}
.container{
width:100%;
}
.middle{
margin:0 220px 0 200px;
background-color: red;
min-height: 300px;
}
.left{
width:200px;
background-color: yellow;
margin-left:-100%;
}
.right{
width:220px;
background-color: blue;
margin-left:-220px;
}
</style>
</head>
<body>
<header>
<h2>我是header</h2>
</header>
<div class="container">
<div class="middle">
<h4>我是middle</h4>
<p>我是内容部分我是内容部分是内容部分我是部分我是内容部分我是内容部分我</p>
</div>
</div>
<div class="left">
<h4>我是left</h4>
<p>我是left的内容</p>
</div>
<div class="right">
<h4>我是right的内容</h4>
<p>我是right的内容</p>
</div>
</body>
</html>
image.png
