为什么右侧设置margin-right:-100%不行呢,右侧若用百分比该如何设置

为什么右侧设置margin-right:-100%不行呢,右侧若用百分比该如何设置

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

    *{margin: 0;padding:0;}

    body{min-width: 700px;}

    .header,

    .footer{

      float: left;

      width: 100%;

      background:#ddd;

      height:40px;

      line-height: 40px;

      text-align: center;

    }

    .container{

      padding: 0 220px 0 200px;


    }

    .left,.middle,.right{

      position: relative;

      float: left;

      min-height: 300px;


    }

    .middle{

        width: 100%;

        background:blue;

    }

    .left{

      width: 200px;

      background:#f00;

      margin-left: -100%;

      left:-200px;  

    }

    .right{

      width:220px;

      background:#30a457;

      margin-left:-220px;

      right: -220px


    }

  </style>

</head>

<body>

  <div class="header">

    <h4>header</h4>


  </div>

  <div class="container">

  <div class="middle">

    <h4>middle</h4>

    <p>这是死的似的这是死的似的这是死的似的这是死的似的这是死的似的这是死的似的这是死的似的这是死的似的这是死的似的</p>

  </div>

  <div class="left">

    <h4>left</h4>

    <p>是死的似是死的</p>

  </div>

  <div class="right">

    <h4>right</h4>

    <p>是死的似是死的似是死的似是死的似是死的似</p>

  </div>

  <div class="footer">

    <h4>footer</h4>

  </div>

</div>

</body>

</html>


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

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

2回答
好帮手慕星星 2018-03-14 09:25:39

如果不把right:-220px;注释掉,是以下情况:

http://img1.sycdn.imooc.com//climg/5aa879ce0001cdcc19200980.jpg

出现横向滚动条,因为margin-right值已经让右侧部分在最右边了,如果还设置right值为负值,右侧部分还是会向右走,就会有留白部分。

好帮手慕星星 2018-03-13 18:00:45

我测试了代码,右侧设置margin-right:-100%;是可以的呀,首先你的right样式中书写错误,缺少分号结尾,

http://img1.sycdn.imooc.com//climg/5aa7a12000013e9003330251.jpg

正确的是:

http://img1.sycdn.imooc.com//climg/5aa7a1320001b6a203190161.jpg

把right值去掉哦,自己再测试下,祝学习愉快~~

  • 提问者 慕粉2015574105 #1
    那为什么要把right注释掉呢,上一个left的却需要 left:-200px;呢
    2018-03-13 20:47:37
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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