乐趣区

关于前端:零基础教你学前端87圣杯布局

jiezi

本文，咱们学习经典的三列布局——圣杯布局。

圣杯布局，顾名思义，两头容器高，旁边两侧的容器低，整个布局看上去像一个圣杯。

咱们来实现一下。

创立 grail-layout.html 文件和 grail-layout-style.css 文件。在 html 里构建根底代码，引入内部款式。

在 body 里增加一个 div 容器，定义类属性 class=”container”。在容器里定义子元素 div，定义类属性 class=”main”。在子元素 main 外面 增加三个 div 容器，定义款式类别离为 class=”center”，class=”left”，class=”right”，填入一些文本。

HTML
 <div class="container">
    <div class="main">
      <div class="center"> 中 </div>
      <div class="left"> 左 </div>
      <div class="right"> 右 </div>
    </div>
  </div>

在 css 文件里定义根底款式。

CSS
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {height: 100%;}

定义选择器 .container，申明款式：width: 100%，height: 500px，min-width: 700px。外层容器宽度小于等于 700 像素，高度固定。

定义选择器 .left，申明款式：height: 200px，background-color:pink。给左侧容器设置固定高度，并增加一个背景色彩。

定义选择器 .center，申明款式：height: 800px，background-color: gold。给两头容器设置固定高度，并增加一个背景色彩。

定义选择器 .right，申明款式：height: 200px，background-color:greenyellow。给右侧容器设置固定高度，并增加一个背景色彩。

CSS
.container {
  width: 100%;
  height: 500px;
  min-width: 700px;
}

.left {
  height: 200px;
  background-color:cyan;
}

.center {
  height: 800px;
  background-color: gold;
}

.right {
  height: 200px;
  background-color:greenyellow;
}

在浏览器里预览一下成果。

回到 css，定义选择器 .main，申明款式：padding: 0 300px 0 200px，给左右两侧的容器留出空间。

看一下成果。右边留出 200px 间隙，右面留出 300px 间隙。

CSS
.main {padding: 0 300px 0 200px;}

下一步，咱们要做的就是将左右两个子元素，搁置到左右两个间隙处，这里须要用到浮动和负 margin。给 left 增加款式 float: left，width: 200px，使左侧容器左浮动，宽度等于间隙的大小。给 center 增加款式 float: left，width: 100%，使两头容器也左浮动，宽度撑满父容器。

CSS
.left {
  float: left;
  width: 200px;
}

.center {
  float: left;
  width: 100%;
}

咱们看，因为两头容器宽度为 100%，左侧容器折行到了上面。

因为两头容器宽度为 100%，外层容器曾经装不下左侧容器，只能折行显示到上面。想要实现左侧容器回到页面左上角，只须要将左侧容器向左挪动 父容器宽度即可。

回到 css，咱们就给 left 增加一样式 margin-left: -100%。

再看一下成果，左侧容器盖在了两头容器下面，但它的地位应该在屏幕的左上角。

持续给 left 增加款式：position: relative，right: 200px，再让它向左挪动 200px。

这样，左侧容器的布局就实现了。接下来调整右测容器的布局。

和左侧容器一样的思路，给 right 增加款式：float: left，width: 300px，margin-right: -300px。

看一下最终成果，当缩放窗口时，左右两个容器固定不动，两头容器自适应。到这儿，圣杯布局就功败垂成了！

对于圣杯布局有一点须要留神：因为三个子元素都是浮动的，撑不开父元素的高度，这就须要给父元素设置固定高度，或者做浮动的清理。

无关经典的三列布局——圣杯布局，就讲完了。最初安排一个作业，依据屏幕上提供的 html 构造，实现另一个经典的三列布局——双飞翼布局成果。

双飞翼布局和圣杯布局最大的不同就是，它多了一个包裹着两头元素的容器。当给 container 容器增加了边框后，要求左右两个容器在边框外部排列。

HTML
<body>
  <div class="container column">
    <div class="center"> 中 </div>
  </div>
  <div class="left column"> 左 </div>
  <div class="right column"> 右 </div>
</body>

文章配套教程链接：https://www.bilibili.com/vide…

退出移动版