CSS 圣杯布局

tianlai 发布于2019-08-02 11:02 / 2525人阅读

摘要：圣杯布局编辑使用弹性布局会十分简单，具体参考文末部分顾名思义左杯柄，圣杯本身，右杯柄效果图要求三列布局，中间宽度自适应，两边定宽中间栏要在浏览器中优先展示渲染代码部分框架在最前面，保证优先级加载设置解释左右与左杯柄右杯柄的

Holy Grail layout 圣杯布局

PS:2018/12/28编辑：使用弹性布局会十分简单，具体参考文末部分

顾名思义：左杯柄，圣杯本身，右杯柄

效果图

要求

三列布局，中间宽度自适应，两边定宽；
中间栏要在浏览器中优先展示渲染；

代码部分

HTML框架


  main
  
  left
  
  right

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盖住

增加内容：弹性布局

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;
}

GPU云服务器云服务器圣杯布局 css布局 css布局教程学习css布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52724.html

CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

摘要：圣杯布局双飞翼布局所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。双飞翼用在外层多加了一个然后改用。前言我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静...

zqhxuyuan 2019-08-30 14:11 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

neuSnail 2019-08-30 15:56 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

Forelax 2019-08-02 14:31 评论0 收藏0
CSS 圣杯布局 / 双飞翼布局的实现

摘要：先让它们浮动，并给和一个固定宽度，宽度，清除浮动流，结果变成上面这样。工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局，这两个名词你可能不熟，那三栏布局你肯定就非常熟悉了，就是两边定宽，中间自适应的布局 1 ，圣杯布局三栏布局 center left right footer 首先HTML结构...

Aldous 2019-04-23 11:40 评论0 收藏0
CSS 圣杯布局 / 双飞翼布局的实现

摘要：先让它们浮动，并给和一个固定宽度，宽度，清除浮动流，结果变成上面这样。工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局，这两个名词你可能不熟，那三栏布局你肯定就非常熟悉了，就是两边定宽，中间自适应的布局 1 ，圣杯布局 !--三栏布局-- header 三栏布局 /header div div cent...

LuDongWei 2019-04-22 16:34 评论0 收藏0