什么是双飞翼布局
圣杯布局是一个两侧宽度固定,中间宽度自适应的三栏布局
双飞翼布局的特点
- 中间部分在DOM结构上优先,以便先行渲染
- 允许三列中的任意一列成为最高列(三列高度不一样并且可以以任一列的高度为最高)
- 只需要使用一个格外的
标签(相对于圣杯布局),给main里面添加一个内容标签content
怎么实现双飞翼布局
- 写下HTML代码(相对于圣杯布局使用一个格外的
标签)
<body>
<div class="container">
<div class="main">
<div class="content">中间</div></div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
- 使三栏都处于左浮状态,并且使中间栏的宽度成父容器的100%
.container {
min-width: 400px;
height: 200px;
background-color: red;
}
.left {
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
}
.right {
width: 150px;
height: 150px;
background-color: skyblue;
float: left;
}
.main {
width: 100%;
height: 100px;
float: left;
background-color:greenyellow;
}
- 为中间栏中的content设置左右padding的值,使其以后为侧边栏定位空出位置,padding的值为侧边栏的宽
.content {
/*预留出位置给左右栏*/
margin-left: 200px;
margin-right: 150px;
}
4. 为两侧侧边栏加上负margin,用以调整位置。其中左边栏设为margin-left:-100%,而右边栏的margin-left则为负的其自身宽度(利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理)
.left {
margin-left: -100%;
}
.right {
margin-left: -150px;
}
完整代码展示
<style>
body {
margin: 0;
padding: 0;
}
.container {
min-width: 400px;
height: 200px;
background-color: red;
}
.left {
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
margin-left: -100%;
}
.right {
width: 150px;
height: 150px;
background-color: skyblue;
float: left;
margin-left: -150px;
}
.main {
width: 100%;
height: 100px;
float: left;
background-color:greenyellow;
}
.content {
margin-left: 200px;
margin-right: 150px;
}
</style>
<body>
<div class="container">
<div class="main">
<div class="content">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
双飞翼布局与圣杯布局的不同
双飞翼布局优点是更好的解决圣杯布局的错乱问题 ,缺点是增加了一个标签
若圣杯布局的设置了最小宽度(看以上代码container),则当屏幕小于这个最小宽度时会出现滚动条,而双飞翼布局则则是三栏响应式布局(以下分别为圣杯布局和双飞翼布局)
圣杯布局参考
圣杯布局参考我的另一篇博客
圣杯布局