CSS 圣杯布局
Holy Grail layout 圣杯布局
PS:2018/12/28编辑：使用弹性布局会十分简单，具体参考文末部分
顾名思义：左杯柄，圣杯本身，右杯柄
- 效果图
- 要求
三列布局，中间宽度自适应，两边定宽；
中间栏要在浏览器中优先展示渲染；
- 代码部分
HTML框架
<div class="container"> <div class="main">main </div> <div class="left">left </div> <div class="right">right </div> </div>
main在最前面，保证优先级加载
CSS设置
.left, .main, .right {
min-height: 600px;
float:left;
position: relative;
}
.left {
left: -200px;
background-color:grey;
width: 200px;
margin-left: -100%;
}
.main {
background-color: blue;
width: 100%;
}
.right {
left:300px;
background-color: red;
width: 300px;
margin-left: -300px;
}
.container{
padding: 0 300px 0 200px;
}
.container::after{
padding: 0 300px 0 200px;
clear: both;
visibility: hidden;
height:0;
content: '';
display: block;
}解释
- container 左右padding与左杯柄右杯柄的width相等，保证圣杯内容不被遮住
- margin-left: -100%;
将左右杯柄定位到main的同行，实现块级元素同行显示的效果
- 左右杯柄及圣杯的position：relative属性，用来控制左右杯柄的定位
- .container::after清除container浮动，与container平级的元素不会被container盖住
增加内容：弹性布局
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="flex_grail.css">
</head>
<body>
<div class="mainContainer">
<div class="">
</div>
<div class="">
</div>
<div class="">
</div>
</div>
</body>
</html>CSS部分
.mainContainer {
display: flex;
flex-direction: row;
}
.mainContainer>div {
height: 600px;
}
.mainContainer>div:first-child {
width: 200px;
background-color: black;
}
.mainContainer>div:nth-last-child(2) {
flex-grow: 1;
background-color: grey;
}
.mainContainer>div:last-child {
width: 300px;
background-color: black;
margin-left: auto;
}相关推荐
ThikHome 2020-08-24
teresalxm 2020-06-05
昔人已老 2020-02-04
nicepainkiller 2020-05-12
尚衍亮 2020-05-12
waterv 2020-04-26
coulder 2020-04-21
aSuncat 2020-03-20
somboy 2020-03-03
tianzyc 2020-03-01
haohong 2020-02-26
nicepainkiller 2020-02-23
haohong 2020-02-14
WinerChopin 2020-02-13
impress 2020-01-01
dazhifu 2020-01-02
MaureenChen 2019-12-27
bowean 2019-12-27
wwwxuewen 2019-12-25