CSS-圣杯布局

最新推荐文章于 2023-08-01 18:50:37 发布

u014695894

最新推荐文章于 2023-08-01 18:50:37 发布

阅读量388

点赞数

分类专栏：前端-css 文章标签： css 布局圣杯布局

本文链接：https://blog.csdn.net/u014695894/article/details/87952517

版权

前端-css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

圣杯布局本质上是利用了浮动+padding+relative定位+margin负值。要实现圣杯布局，要理解以下几个步骤。

步骤一：

定义一个父容器div,其中包含了圣杯布局中的中间栏的div,将父div设置padding,padding-left设置为左栏的宽度，padding-right设置右边栏的宽度。则父元素剩下的可供子元素使用的宽度为父元素总宽度 - padding-left - padding-right。此时中间栏占据的100%,指的是父栏可用宽度的 100%，是去除padding-left和padding-right后的宽度的100%。其效果如下
在这里插入图片描述
代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>圣杯布局</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{min-width: 700px;}
  .container{
    padding:0 220px 0 200px;
    overflow: hidden;
    background-color: red;
  }
  .middle {
    background-color: blue;
    width: 100%;
    word-break: break-all;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="middle">
      <h4>middle</h4>
      <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
      </p>
    </div>
  </div>
</body>
</html>

步骤二

现在加入左边栏和右边栏在这里插入图片描述
此时由于父容器container已经被middle用完了，所以左右边栏被放到下面去了，现在我们要想办法把左右边栏和中间栏放一行去

那么我们第一个想法是利用浮动，左中右均采用了浮动

此时由于main占据了父元素container可用的100%的宽度，左右栏是一行了，那么只能用父容器container中不可用的左右宽度了。
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>圣杯布局</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{min-width: 700px;}
  .container{
    padding:0 220px 0 200px;
    overflow: hidden;
    background-color: red;
  }
  .middle {
    background-color: blue;
    width: 100%;
    word-break: break-all;
    float: left;
  }
  .left{
    background-color: orange;
    width: 200px;
    float: left;
  }
  .right{
    background-color: yellow;
    width: 220px;
    float: left;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="middle">
      <h4>middle</h4>
      <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
      </p>
    </div>
    <div class="left">
      <h4>left</h4>
      <p>oooooooooooooo
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
      000000000000000</p>
    </div>
    <div class="right">
      <h4>right</h4>
      <p>BBBBBBBBBBBBBB
        BBBBBBBBBBBBBBBBBB
      88888888888888888888</p>
    </div>
  </div>
</body>
</html>

步骤三

将左栏利用margin-left的负值向左移动，核心代码在这里插入图片描述
则此时变成这样了

步骤四

此时要使左边栏继续向左移动，但是左边栏已经达到了父容器.container的所有可用的最左边了，怎么办呢，只能利用relative定位，占据它不能被占据的部分。核心代码在这里插入图片描述
效果如下：

步骤五

现在左边已经搞定了，现在要把右边栏也和中间栏部署同一行，同样适用margin-left的负值，向左移动
核心代码
在这里插入图片描述
效果

此时右边栏已经上来了，但占据了中间栏的位置，但没有办法，右边栏已经达到父容器.containe可用宽度的最右边了。那么我还想它继续向右，占据它不能占据的空间，那么怎么办呢。

步骤六

右边栏依旧是使用relative去占据它不能占据的空间
核心代码
在这里插入图片描述
效果如下

步骤七

去掉父容器.container的背景色，加上footer和header，则此时圣杯布局已经全部部署完成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>圣杯布局</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{min-width: 700px;}
  .header,
  .footer{ 
    border: 1px solid #333;
    background: #aaa;
    text-align: center;
  }
  .left,
  .middle,
  .right{ 
    position: relative;
    float: left;
    min-height: 130px;
  }
  .container{
    padding:0 220px 0 200px;
    overflow: hidden;
  }
  .left{
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background: red;
  }
  .right{
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: green;
  }
  .middle{ 
    width: 100%;
    background: blue;
    word-break: break-all;

  }
  .footer{ 
    clear: both;
  }
</style>
</head>
<body>
  <div class="header">
    <h4>header</h4>
  </div>
  <div class="container">
    <div class="middle">
      <h4>middle</h4>
      <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
      </p>
    </div>
    <div class="left">
      <h4>left</h4>
      <p>oooooooooooooo
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
      000000000000000</p>
    </div>
    <div class="right">
      <h4>right</h4>
      <p>BBBBBBBBBBBBBB
        BBBBBBBBBBBBBBBBBB
      88888888888888888888</p>
    </div>
  </div>
  <div class="footer">
    <h4>footer</h4>
  </div>
</body>
</html>

效果如下
在这里插入图片描述

u014695894

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-圣杯布局

圣杯布局本质上是利用了浮动+padding+relative定位+margin负值。要实现圣杯布局，要理解以下几个步骤。步骤一：定义一个父容器div,其中包含了圣杯布局中的中间栏的div,将父div设置padding,padding-left设置为左栏的宽度，padding-right设置右边栏的宽度。则父元素剩下的可供子元素使用的宽度为父元素总宽度 - padding-left - padd...
复制链接

扫一扫