圣杯布局:是指左右宽度固定中间自适应
其实我们常用的应该是float,但是flex和定位也是可以实现的;下面我将一一进行实现,如不对之处望大家提出
float方法
HTML
<div class="grail">
<div class="grailLeft">左</div>
<div class="grailRight">右</div>
<div class="grailContent">中</div>
</div>
CSS
.grail {
background-color: #000;
height: 45px;
color: #fff;
}
.grailLeft {
float: left;
width: 100px;
height: 45px;
background-color: red;
}
.grailRight {
float: right;
width: 100px;
height: 45px;
background-color: pink;
}
.grailContent {
height: 45px;
background-color: royalblue;
}
flex方法
HTML
<div class="grail">
<div class="grailLeft">左</div>
<div class="grailContent">中</div>
<div class="grailRight">右</div>
</div>
CSS
.grail {
display: flex;
justify-content: space-between;
background-color: #000;
height: 45px;
color: #fff;
}
.grailLeft {
width: 100px;
height: 45px;
background-color: red;
}
.grailRight {
width: 100px;
height: 45px;
background-color: pink;
}
.grailContent {
flex: 1;
height: 45px;
background-color: royalblue;
}
position方法
HTML
<div class="grail">
<div class="grailLeft">左</div>
<div class="grailRight">右</div>
<div class="grailContent">中</div>
</div>
CSS
.grail {
position: relative;
background-color: #000;
height: 45px;
color: #fff;
}
.grailLeft {
position: absolute;
left: 0;
width: 100px;
height: 45px;
background-color: red;
}
.grailRight {
position: absolute;
right: 0;
width: 100px;
height: 45px;
background-color: pink;
}
.grailContent {
height: 45px;
background-color: royalblue;
}
以上的三种方法均可以实现;大家可以拿去试试看