圣杯布局。。
来源：3-2 圣杯布局案例（了解即可）
Perfect雪儿
2019-07-08 22:22:41
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{margin: 0;padding: 0;text-align: center;min-width: 700px;}
.contain{
padding: 0 220px 0 200px;
}
.contain .left,
.contain .middle,
.contain .right{
position: relative;
float: left;
min-height: 300px;
}
.contain .middle{
width: 100%;
background: pink;
}
.contain .left{
width: 200px;
background: blue;
margin-left: -100%;
left: -200px;
}
.contain .right{
width: 220px;
background: #137f82;
margin-left: -100%;
right: -220px;
}
.head,
.footer{
width: 100%;
height: 150px;
background: #111;
text-align: center;
}
.head .logo{
height: 100px;
float: left;
margin-top: 25px;
}
.head .nav{
height: 150px;
float: right;
}
.head .nav ul li{
list-style: none;
float: left;
color: #fff;
margin: 50px 20px;
}
.footer .nav{
height: 150px;
margin: 0 25%;
}
.footer ul li{
list-style: none;
float: left;
color: #fff;
margin: 50px 20px;
}
.clear{clear: both;}
</style>
</head>
<body>
<div class="head">
<div class="logo">
<img src="http://climg.mukewang.com/590037f600016ce303000100.png">
</div>
<div class="nav">
<ul>
<li>课程</li>
<li>课程</li>
<li>课程</li>
<li>课程</li>
<li>课程</li>
</ul>
</div>
</div>
<div class="contain">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer">
<div class="nav">
<ul>
<li>结尾</li>
<li>结尾</li>
<li>结尾</li>
<li>结尾</li>
<li>结尾</li>
</ul>
</div>
</div>
</body>
</html>
是按照老师写的来写的margin-left：-100% left：-200px 运行下来怎么不对呀？
2回答
-
同学你好，右侧在没有设置margin-left值和right值时，排列如下：
设置margin-left为负值时，元素是会往左移动的，
当移动的值是它自身的宽度之后，它整个区域会叠在中间盒子上面（此时距离右边还剩父元素padding的距离，结合定位移动），就到达了最右侧，
如果帮助到了你，欢迎采纳~祝学习愉快~
0 -
好帮手慕言
2019-07-09
同学你好，是html结构的原因，中间部分是优先加载的，所以html结构：
另外右侧内容的margin-left值是-220px，再设置right值为-220px，就排到了最右边。
同学可以测下，祝学习愉快~
0h019-07-09
相似问题