昨天工作比较忙,没有及时更新文档,趁着深夜发出来。所谓为什么叫圣杯布局,我的感觉可能是做出来的效果很像圣杯大概吧!
实现效果:(两边固定,中间随浏览器的大小变化而变化)
html:公用部分
<!-- pc 常用float -->
<div class="box1">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<!-- 移动端 常用flex -->
<div class="box2">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<!-- 利用margin -->
<div class="box3">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
方法1:(利用float布局)
.box1 {
//父元素相对定位
position: relative;
padding: 0 200px;
}
.box1 .left {
//子元素相对定位
position: absolute;
top: 0;
left: 0;
//左面的盒子左浮动
float: left;
height: 200px;
width: 200px;
background-color: pink;
}
.box1 .right {
position: absolute;
top: 0;
right: 0;
//右面的盒子右浮动
float: right;
height: 200px;
width: 200px;
background-color: hotpink;
}
.box1 .center {
//中间盒子自适应100%
width: 100%;
height: 200px;
background-color: yellow;
}
方法2:(利用flex布局)
.box2 {
display: flex;
margin-top: 100px;
}
.box2 .left {
height: 200px;
width: 200px;
background-color: pink;
}
.box2 .right {
height: 200px;
width: 200px;
background-color: hotpink;
}
.box2 .center {
//利用flex布局中间 flex1
flex: 1;
width: 100%;
height: 200px;
background-color: yellow;
}
.box3 {
position: relative;
margin-top: 100px;
}
.box3 .left {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
background-color: pink;
}
.box3 .right {
position: absolute;
top: 0;
right: 0;
height: 200px;
width: 200px;
background-color: hotpink;
}
.box3 .center {
margin: 0 200px;
//在这里要说明一下,档width不设置的时候,
//margin左右设置正值会默认向内的效果
/* width: 100%; */
height: 200px;
background-color: yellow;
}
未完待续,有更好的方法我会及时更新的,欢迎大家前来评论