css实现圣杯布局

笑到根本停不下来的Kathy思

已于 2022-07-09 18:45:41 修改

阅读量354

点赞数

分类专栏：前端文章标签： css css3 html

于 2022-05-23 14:41:41 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44478371/article/details/124926823

版权

前端专栏收录该内容

9 篇文章

订阅专栏

css实现圣杯布局

圣杯布局和双飞翼之间，最好是先看圣杯布局，再看双飞翼，这样更能对比差异。
个人认为圣杯布局主要注意parent的padding属性设置和左右的margin-left属性负值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #header {
        height: 60px;
        background-color: #ccc;
      }
      #parent {
        box-sizing: border-box;
        height: 500px;
        padding: 0 215px 0 115px; /*为了使#center摆正,左右padding分别等于左右盒子的宽,可以结合左右盒子相对定位的left调整间距*/
      }
      #left {
        margin-left: -100%; /*使#left上去一行*/
        position: relative;
        /* left: -115px; 相对定位调整#left的位置,正值大于或等于自身宽度 */
        float: left;
        width: 100px;
        height: 500px;
        background-color: #f00;
        opacity: 0.5;
      }
      #center {
        float: left;
        width: 100%; /*由于#parent的padding,达到自适应的目的*/
        height: 500px;
        box-sizing: border-box;
        border: 1px solid #000;
        background-color: #eeff2b;
      }
      #right {
        position: relative;
        left: 215px; /*相对定位调整#right的位置,大于或等于自身宽度*/
        width: 200px;
        height: 500px;
        margin-left: -200px; /*使#right上去一行*/
        float: left;
        background-color: #0f0;
        opacity: 0.5;
      }
      #footer {
        height: 60px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="header"></div>
    <div id="parent">
      <!--#center需要放在前面-->
      <div id="center">
        中间自适应
        <hr />
      </div>
      <div id="left">左列定宽</div>
      <div id="right">右列定宽</div>
    </div>
    <div id="footer"></div>
    <script type="text/javascript"></script>
  </body>
</html>