第18题 CSS如何进行圣杯布局

目录
文章目录隐藏
  1. 1. 利用 flex 布局
  2. 2.绝对定位
  3. 3. grid 布局

圣杯布局如图:

圣杯布局

而且要做到左右宽度固定,中间宽度自适应。

首先我们把公共的 HTML 和 CSS 代码附上,以下方法中都可使用,不做重复工作。

公共 HTML 代码:

<body>
    <div class="header">这里是头部</div>
    <div class="container">
        <div class="left">左边</div>
        <div class="middle">中间部分</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
</body>

公共 CSS 代码:

*{
  margin: 0;
  padding: 0;
}
.header,.footer{
	height:40px;
	width:100%;
	background:red;
}

1. 利用 flex 布局

CSS 代码:

.container{
	display: flex;
}
.middle{
	flex: 1;
	background:yellow;
}
.left{
	width:200px;
	background:pink;
}
.right{
	background: aqua;
	width:300px;
}

2.绝对定位

.container{
  min-height: 1.2em;
  position: relative;
}

.container>div {
  position: absolute;
}

.middle {
  left: 200px;
  right: 250px;
  background: yellow;
}

.left {
  left: 0;
  width: 200px;
  background: pink;
}

.right {
  right: 0;
  width: 250px;
  background: aqua;
}

3. grid 布局

HTML 代码:

<div id="header">header</div>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>     
<div id="footer">footer</div>

CSS 代码:

body{
	display: grid;
}
#header{
	background: red;
	grid-row:1;
	grid-column:1/5;
}
	
#left{
	grid-row:2;
	grid-column:1/2;
	background: orange;
}
#right{
	grid-row:2;
	grid-column:4/5;
	background: cadetblue;
}
#middle{
	grid-row:2;
	grid-column:2/4;
	background: rebeccapurple
}
#footer{
	background: gold;
	grid-row:3;
	grid-column:1/5;
}

看看 grid 布局,其实也挺简单的吧,里面的参数应该不言而喻了。另外我之前也写过一篇关于 grid 布局文章:CSS Grid 网格布局实例教程,感兴趣的小伙伴可以看一下。

另外说一点,到 2019 年为止,grid 现在绝大多数浏览器已经可以兼容了,可以着手使用了。

当然,还有 table 布局,年代比较久远了,而且对 SEO 不友好,知道就可以,这里就不浪费篇幅了。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 第18题 CSS如何进行圣杯布局

发表回复