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

圣杯布局如图:

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

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

首先我们把公共的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不友好,知道就可以,这里就不浪费篇幅了。

未经允许不得转载:码云笔记 » 第18题 CSS如何进行圣杯布局
喜欢(1) 打赏

评论抢沙发

评论前必须登录!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏