为什么我的left和right实现效果和老师视频中的不一样？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {
padding: 0;
margin: 0;
text-align: center;
color: white;
}
body {
min-width: 500px;
}
.head {
width: 100%;
height: 100px;
background: black;
line-height: 100px;
}
.head img {
float: left;
}
li{
list-style-type: none;
}
.head ul li {
float: right;
padding-right: 40px;
}
a {
text-decoration: none;
}
.body {
padding: 0 300px;
overflow: hidden;
}
.body div {
position: relative;
float: left;
min-height: 600px;
}
.middle {
width: 100%;
height: 100%;
background: pink;
}
.middle img {
width: 80%;
height: 400px;
margin: 100px auto;
}
.left {
background: wheat;
width: 300px;
margin-left: -100%;
padding-top: 50px;
left: -300px;
}
.right {
background: skyblue;
width: 300px;
margin-right: -100%;
padding-top: 50px;
}
.foot {
width: 100%;
height: 100px;
background: black;
line-height: 100px;
text-align: center;
}
.foot ul li{
display: inline-block;
padding-right: 40px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="head">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png">
<div>
<ul>
<li><a href="#">打完</a></li>
<li><a href="#">格式</a></li>
<li><a href="#">格式</a></li>
<li><a href="#">光荣道</a></li>
</ul>
</div>
</div>
<div class="body">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
</div>
<div class="left">
<ul>
<li><a href="#">打完</a></li>
<li><a href="#">格式</a></li>
<li><a href="#">格式</a></li>
<li><a href="#">光荣道</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a href="#">打完</a></li>
<li><a href="#">格式</a></li>
<li><a href="#">格式</a></li>
<li><a href="#">光荣道</a></li>
</ul>
</div>
</div>
<div class="foot">
<ul>
<li><a href="#">打完</a></li>
<li><a href="#">格式</a></li>
<li><a href="#">格式</a></li>
<li><a href="#">光荣道</a></li>
</ul>
</div>
</body>
</html>
1、老师视频里right部分也是用margin-left：100%让right部分的位置到了middle的最右边，然后使用right让它到了middle的右侧，可是我的用了margin-left以后right部分跑到了middle的最左边，再加个right只是在这个基础上向右移动了一点点；我用了margin-right：100%后right部分却直接移动到了middle的右侧。这到底是怎么回事呢？
2、老师视频中缩小窗口的宽度时left部分、middle部分、right部分都是一直在一行的，可是当我宽度缩小到最小宽度后两侧的部分就自动跑到middle下面去了，再缩小一些直到不能缩小的过程中却又出现：left跑到最上面来、right在下面、middle消失了的情况
麻烦老师帮忙看看怎么回事哇
正在回答
同学你好，不一样的。设置百分比是参照父元素的宽度计算的 。例如父元素宽度（不包含padding）为1200px ，那么子元素的margin-left：100%就是移动1200px 。左边的元素因为要移动到父元素的最左侧，所以才会设置margin-left：-100% ，右边的元素不需要在父元素的左侧，所以不要设置margin-left：-100%。这里重新理解一下。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
同学你好，问题解答如下：
1. 同学设置的与课程中并不一样哦，建议重新看一下课程，左边的盒子是设置margin-left：-100%是往左移动，右边的盒子是设置margin-left：-220px 。
2.设置的最小宽度太小了，页面缩小时 ，两边盒子宽度是固定的。页面缩小放不下的内容就会被挤下去。参考一下教辅中的思路，设置最小宽度：
以下是圣杯布局思路的资料地址，建议同学重新看一下整体的布局代码：http://file.mukewang.com/class/assist/192/4698985/%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80%E5%AE%9E%E7%8E%B0%E6%80%9D%E8%B7%AF.pdf
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星