圣杯布局的介绍与实现

最新推荐文章于 2023-08-27 19:14:20 发布

爱酷的桥俏皮

最新推荐文章于 2023-08-27 19:14:20 发布

阅读量525

点赞数

分类专栏：前端相关技术文章标签：圣杯布局双飞翼布局 flex布局 3栏布局

本文链接：https://blog.csdn.net/lq15310444798/article/details/81216710

版权

前端相关技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、通过圣杯布局、双飞翼布局、flex布局实现左中右3栏布局（左右固定，中间流动布局）

产生原因：以前实现左中右必须按照源顺序（在 DOM 中表现为先写 Left，然后 Middle，最后，Right）等，它将可能导致代码不够灵活，尤其是从 DOM 的载入顺序上来说，中间的内容不能被首先加载。

如何实现：

结构申明：声明一个容器.container，并同时声明.middle，.left，.right几个包含块。结构如下

<div class="container">
  <div class="middle"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

基本设置：设置容器的高度400px（可以自己设定），并设置.middle宽度为100%（充满一行），设置.left，.right宽度为200px（固定），效果如下

可以看到这个是布局达不到想要的效果（左右固定，中间流动），如何才能达到这样的效果。这个时候我们可以采用填充思想，就是我们先把位置流出来，然后将下面两块填充上去。留出的位置要正好能够放下下面的每一块（这个是没有边框的情况下，如果有边框，这需要考虑边框的占用宽度）
腾出空间：我们把上面的一行往中间挤一点，让两边留出一点空间，分别放置左右元素，腾空间我们可以是使用容器的padding属性，让padding将中间部分挤窄一点，效果如下：
```
.container{
  height:400px;
  padding:0 200px 0 200px;/*这里的左右padding分别为左右块的宽度（不考虑边框，这里没有边框以及其它属性，如果有，需要加上其它属性的值）*/
}
```

这里写图片描述

将下面两块放上去：如何放？这个时候我们可以使用负外边距，负的外边距可以使得元素超出父元素的内容区域（content区域），这里我们设置.left的左外边距为-100%，这个时候它会继续向左移动，由于现在它的左边是.middle的边界，浮动-100%是一行的距离，所以会跑到上一行的最左边（.middle里面的最左边，如果设置-120%，那么会继续向左，超出.middle）。同理设置右边的块左外边距为-200px，为它的宽度。效果如下：
```
.left{
  width: 200px;
  height: 400px;
  float: left;
  background-color: #0c9;
  margin-left: -100%;
}
.right{
  width: 200px;
  height: 400px;
  float: left;
  background-color: #7cdec6;
  margin-left: -200px;
}
```
调整左右位置：现在就是通过调整左右块的位置，让其放到正确的位置上面，这里通过设置左右的定位position为relative，然后设置相对于左右定位多少，就能够移动到正确的位置上面了。比如对于左边的块，我们设置他相对于右边：right:200px，就能到达空白区域，右边的块设置它相对于左边left:200px，能到达正确的位置。效果如下：
```
.left{
  position:relative;
  right:200px;
}
.right{
  position:relative;
  left:200px;
}
```

圣杯布局的完整代码：

<!DOCTYPE html>
<html>
<head>
  <title>圣杯布局</title>
  <style type="text/css">
  /*头部*/
    .header{
      height: 50px;
      width: 100%;
      background-color: gray;
    }

  /*容器，用来装圣杯布局的东西*/
    .container{
      height: 400px;
      padding: 0 200px 0 200px;
    }
  /*中间部分*/
    .container .middle{
      width: 100%;
      height: 400px;
      float: left;
      background-color: #5ed7f7;
    }
  /*左边部分*/
    .container .left{
      width: 200px;
      height: 400px;
      float: left;
      background-color: #0c9;
      margin-left: -100%;
      position: relative;
      right: 200px;
    }
  /*右边部分*/
    .container .right{
      width: 200px;
      height: 400px;
      float: left;
      background-color: #7cdec6;
      margin-left: -200px;
      position: relative;
      left: 200px;
    }
  /*脚步*/
    .footer{
      height: 50px;
      width: 100%;
      background-color: gray;
      clear: both;/*清除浮动，让footer周围不出现浮动元素，防止footer跟着浮动元素一起浮动*/
    }
  </style>
</head>
<body>
  <div class="header"></div>
  <div class="container">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="footer"></div>
</body>
</html>

当然还可以通过双飞翼布局、flex布局实现同样的效果，这里就提一下。

爱酷的桥俏皮

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局的介绍与实现

1、通过圣杯布局、双飞翼布局、flex布局实现左中右3栏布局（左右固定，中间流动布局）产生原因：以前实现左中右必须按照源顺序（在 DOM 中表现为先写 Left，然后 Middle，最后，Right）等，它将可能导致代码不够灵活，尤其是从 DOM 的载入顺序上来说，中间的内容不能被首先加载。如何实现：结构申明：声明一个容器.container，并同时声明.middle，.left，....
复制链接

扫一扫