老师能详细讲讲为什么left设置mar-left:-100%而right设置-220吗?没想清楚

老师能详细讲讲为什么left设置mar-left:-100%而right设置-220吗?没想清楚

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

  *{

  margin: 0;

  padding:0;

  }

  body{

  min-width: 700px;

  }

  .footer, 

  .header{

  width: 100%;

  height: 40px;

  float: left;

  line-height: 40px;

  background: black;

  }

  .container{

  padding: 0px 220px 0px 200px;

  }

  .middle{

  width: 100%;

  background: #99FFFF;

  }

  .left,

  .right,

  .middle{

  float: left;

  position: relative;

  min-height: 300px;

  }

  .left{

  background: #EEFFBB;

  width: 200px;

  margin-left: -100%;

  }

  .right{

  background: #CCCCFF;

  width: 220px;

  margin-left: -100%;

  }

  </style>

</head>

<body>

<div class="header">网页的头部</div>

<div class="container">

<div class="clear"></div>

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

<div class="left">网页左侧</div>

<div class="right">网页右侧</div>

</div>

<div class="footer">网页底部</div>

</body>

</html>


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

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

1回答
好帮手慕星星 2018-06-22 09:57:48

1、三个部分都设置了浮动,正常是显示在一行,因为middle设置的宽度为100%,占据了父元素宽度全部,所以把left和right挤下来了,你还可以想象成排列在一行显示。

2、想要把left放在最左边,可以使用margin-left值为负值-100%,这样就到达了最左边,想要把right放在最右边,可以使用margin-left为负值,自身的宽度就可以了-220px,显示如下:

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

自己再理解下,祝学习愉快~~

  • 想问下,要把left放在最左边,用margin-left:-100%,这个百分比是以谁为参照呢?是谁的宽度的100%?这点不明白
    2018-06-25 16:32:29
  • 好像想明白了,这个-100%指的是middle的宽度,刚好也是100%。
    2018-06-25 16:38:09
  • 为什么?想要把left放在最左边,可以使用margin-left值为负值-100%,这样就到达了最左边,想要把right放在最右边,可以使用margin-left为负值,自身的宽度就可以了-220px;想不明白这个
    2018-07-24 14:51:09
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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