老师,为什么无法实现圣杯效果,甚至min-height也没有反应

老师,为什么无法实现圣杯效果,甚至min-height也没有反应

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    *{

      padding:0;

      margin:0;

    }

    body{

      min-width:700px;

    }

    .head{

      width:800px;

      height:400px;

      margin:0 auto;

      position:relative;

    }

    .left{

      width:200px;

      height:400px;

      background-color:red;

      float:left;

      position:relative;

      top:-100%;

      left:-200px;

    }

    .right{

      width:200px;

      height:400px;

      background-color:green;

      float:left;

      position:relative;

      top:-100%;

      right:-600px;

      

    }

    .middle{

      width:100%;

      min-height:400px;

      background-color:blue;

      float:left;

      position:relative;


    }

  </style>

</head>

<body>

  <div class="head">

    <div class="middle">中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间</div>

    <div class="left">左边</div>

    <div class="right">右边</div>

  </div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕糖 2017-11-26 14:39:19

你好,不明白你说的小数字具体指什么,至于、right中改为:margin-left:-200px;right:-200px;这个是圣杯布局的格式,最开始是在右侧设置了内边距200px;这个老师的课程中都是有讲的哦,建议:可以把视频看下,根据老师的代码理解下,然后修改测试下自己的代码,之后哪里不理解可以标出问题,在问答区提问哦。

祝学习愉快~

好帮手慕糖 2017-11-23 19:10:24

你好,1、.head中的样式改为:padding: 0 200px 0 200px;

2、 .left中,top属性改为margin-left: -100%;

3、right中改为:margin-left:-200px;right:-200px;

祝学习愉快~

  • 提问者 阿城喜欢的 #1
    老师,margin-left:-100%;margin-left:-200px;该怎么理解。尝试了几个数字,小数字则向左移动一点点,加大数字就上移了。这是为什么呢?
    2017-11-24 19:17:47
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师