圣杯布局和双飞翼布局是我们日常中常见的两种布局,两种布局基本一致,都是两边定宽,中间自适应的三栏布局。下面就直接上代码:
双飞翼布局:
双飞翼布局是在center的div里插入一个div,通过调整内部div的margin值,实现中间栏自适应。
<div class="center float">
<div class="mid">mid</div>
</div>
<div class="left float">left</div>
<div class="right float">right</div>
.float{
float: left;
height:400px;
}
.center{
width: 100%;
}
.mid{
margin: 0 200px;
height:400px;
background: red;
}
.left{
background: orange;
width: 200px;
margin-left: -100%;
}
.right{
background: orangered;
width: 200px;
margin-left:-200px;
}
圣杯布局
圣杯布局布局就是把middle放在最前面,最外面div用padding值
<div class="box">
<div class="middle float">mid</div>
<div class="left float">left</div>
<div class="right float">right</div>
</div>
.box{
padding: 0 50px 0 100px;
}
.float{
float: left;
}
.middle{
width: 100%;
height:200px;
background: red;
}
.left{
width: 100px;
background: hotpink;
height:200px;
margin-left: -100%;
position: relative;
right: 100px;
}
.right{
width: 50px;
height:200px;
background: indigo;
margin-right: -50px;
}
网友评论