您好，麻烦能帮我看下这样实现的圣杯效果对么？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .parent{
             width: 80%;
             height: 60%;
             top:20%;
             position: relative;
             padding-left: 200px;
            padding-right: 200px;
         }
        .middle{
            width: 100%;
            height: 100%;
            background:beige;
        }
        .left{
            width: 200px;
            height:80%;
            position: absolute;
            border: 1px red solid;
            left:0px;
            top: 0px;
        }
        .right{
            width: 200px;
            height:90%;
            position: absolute;
            border: 1px green solid;
            right: 0px;
            top: 0px;
        }

    </style>
</head>
<body>
      <div class="parent">
          <div class="middle">我是middle</div>
          <div class="left">我是left</div>
          <div class="right">我是right</div>
      </div>
</body>
</html>

qq_取个名字太麻烦_0 2018-07-24

源自：CSS网页布局基础 3-2 圣杯布局案例

收起

2回答

妮可妮可妮_ 回答被采纳获得+3积分 2018-07-24 17:34:53

负的margin-left会让元素沿文档流向左移动

当设置left部分的margin-left为-100%时,那么他就会向左移动整个父元素的宽度,到父元素的最左边.

覆盖住了main部分.

当left上移过后，right就会处于上一行的开头位置，这时再给它设置一个margin-left为负的偏移量，偏移量恰好是其宽度.right就会左移到上一行的末尾。

这样解释同学可以理解吗?

如果可以帮助到你,一定要记得采纳哦!!

收起回答

妮可妮可妮_ 2018-07-24 14:14:45

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    body {
        min-width: 600px;
    }

    .parent {
        /* padding-left: 200px;
        padding-right: 200px;*/
        padding: 0 200px;
    }

    .middle {
        width: 100%;
        background: beige;
    }

    .left {
        width: 200px;
        background: green;
        left: -200px;
        margin-left: -100%;
    }

    .right {
        width: 200px;
        background: red;
        right: -200px;
        margin-left: -200px;
    }

    .left,
    .middle,
    .right {
        position: relative;
        min-height: 130px;
        float: left;
    }
    </style>
</head>

<body>
    <div class="parent">
        <div class="middle">我是middle</div>
        <div class="left">我是left</div>
        <div class="right">我是right</div>
    </div>
</body>

</html>

感觉同学对圣杯布局掌握的还不是很好,建议重新在看一遍视频,跟着老师讲解的步骤动手试一试,要多学多练才能更好地掌握知识点哦~

祝学习愉快!

收起回答

提问者 qq_取个名字太麻烦_0 #1

我有点儿理解不了，为什么left,right都是设置margin-left为负值来实现的，不是一左一右么？不应该是左边的margin-left:-200px 右边的margin-right:-220px么?

2018-07-24 14:17:54
提问者 qq_取个名字太麻烦_0 #2

理解了。。根本就没讲明白课程。

2018-07-24 15:00:12
妮可妮可妮_ 回复提问者 qq_取个名字太麻烦_0 #3

关于margin值的知识点,在我们路径中css基础,盒子模型处有详细的讲解,如果同学对此处了解的还不是很透彻,建议可以回头再复习一遍

2018-07-24 17:31:26