大家好,又见面了,我是你们的朋友全栈君。
圣杯布局是经典的css布局,左右两栏的宽度固定不变,中间那一栏是自适应,下面将用felx、float、position三种方法进行圣杯布局
效果图:
body代码:
<body>
<header></header>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
<footer></footer>
</body>
1. 圣杯布局之flex: left和right定宽为200px,middle自适应
- 给middle设置弹性布局display:flex;
- left和right定宽200px,middle设置为flex:1;
css代码:
header{
height: 80px;
background-color: #cccccc;
}
.box{
height: 200px;
background-color: yellow;
display: flex;
}
.box .middle{
height: 200px;
background: pink;
flex: 1;
}
.box .left{
width: 200px;
height: 200px;
background-color: red;
}
.box .right{
width: 200px;
height: 200px;
background-color: purple;
}
footer{
height: 100px;
background-color: black;
color: white;
}
2. 圣杯布局之float
将left进行浮动靠左,将right进行浮动靠右
css代码:
header{
height: 80px;
background-color: #cccccc;
}
.box{
height: 200px;
background-color: yellow;
}
.box .left{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box .right{
width: 200px;
height: 200px;
background-color: purple;
float: right;
}
.box .middle{
height: 200px;
background-color: pink;
}
footer{
height: 100px;
background-color: black;
color: white;
}
3. 圣杯布局之position:left和right宽度设为20%,中间60%自适应
将父元素box设为相对定位,再将left、right、middle设置为绝对定位
header{
height: 80px;
background-color: #cccccc;
}
.box{
height: 200px;
background-color: yellow;
position: relative;
}
.box .left{
width: 20%;
height: 100%;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.box .middle{
height: 100%;
background-color: pink;
position: absolute;
top: 0;
left: 20%;
}
.box .right{
width: 20%;
height: 100%;
background-color: purple;
position: absolute;
top: 0;
right: 0;
}
footer{
height: 100px;
background-color: black;
color: white;
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148044.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...