3-3练习问题，为什么我这个right要移margin的两倍才到最右边的位置？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;
padding:0;
}
.header{
width:100%;
min-width: 1500px;
height:100px;
background:black;
position: fixed;
top: 0;
overflow: hidden;
zoom:1;
z-index:2 ;
}
.logo{
height:100px;
width:300px;
background: url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) center no-repeat;
float:left;
cursor: pointer;
}
.nav-list{
height: 100px;
width: 700px;
position:absolute;
right: 0;
}
.nav-li{
height:100px;
width:100px;
text-align:center;
line-height:100px;
color:#fff;
float:right;
cursor: pointer;
}
.footer{
width:100%;
min-width: 1100px;
height:100px;
background:black;
overflow: hidden;
zoom:1;
position: fixed;
bottom: 0;
}
.nav-2{
height: 100px;
width: 50%;
text-align:center;
margin: 0 auto;
clear: both;
}
.nav-li2{
height:100px;
width:100px;
line-height:100px;
color:#fff;
cursor: pointer;
display: inline-block;
}
.container{
padding: 0 300px 0 300px;min-width: 900px;
}
.left,.middle,.right{position: relative;float: left;padding-top: 100px;}
.middle{
width: 100%;
height:1000px;
overflow: hidden;
background-color: #f0f0f0;
text-align: center;
padding-top: 220px;
}
.left{
width: 300px;
height:1000px;
background-color: #ddd;
margin-left: -100%;
left:-300px;
top: 100px;
}
.left-li{
width: 200px;
height:auto;
padding-top:20px;
line-height: 40px;
margin-left: auto;
margin-right: auto;
}
.right{
border-left: 1px solid #fff;
width: 300px;
height: 1000px;
margin-left:-600px;
right: -600px;
top: 100px;
background-color: #ddd;
}
.right-li{
width: 150px;
height:auto;
padding-top:20px;
line-height: 40px;
margin-left: auto;
margin-right: auto;
}
.submit{
background-color: black;
color: #fff;
width: 100px;
height:40px;
font: 16px "楷体"；
}
a{
background-color: #000;
}
a:link {
color: #fff;
text-decoration: none;
}
a:visited{
color: #fff;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav-list">
<div class="nav-li">课程</div>
<div class="nav-li">实战</div>
<div class="nav-li">路径</div>
<div class="nav-li">猿问</div>
<div class="nav-li">手记</div>
</div>
</div>
<div class="container">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
</div>
<div class="left">
<div class="left-li">
<h1>课程推荐</h1>
<p><a href="">职业路径</a> HTML5与CSS3实现动态网页</p>
<p><a href="">职业路径</a> 零基础入门Android</p>
<p><a href="">职业路径</a> ios零基础语法与常用控件</p>
<p><a href="">职业路径</a> PHP入门开发</p>
<p><a href="">职业路径</a> JAVA入门开fa</p>
</div>
</div>
<div class="right">
<div class="right-li">
<h1>登陆</h1>
<form>
<input type="text" name="username" size="20" maxlength="11" placeholder="请输入登陆账号/手机号" />
<input type="password" name="password" size="20" placeholder="请输入密码" /><br/>
<input class="submit" type="submit" name="submit" value="登陆" />
</form>
</div>
</div>
</div>
<div class="footer">
<div class="nav-2">
<div class="nav-li2">网站首页</div>
<div class="nav-li2">企业合作</div>
<div class="nav-li2">人才招娉</div>
<div class="nav-li2">联系我们</div>
<div class="nav-li2">常见问题</div>
<div class="nav-li2">友情链接</div>
</div>
</div>
</body>
</html>20
收起
正在回答
3回答
给父元素container设置一个固定的高度，或者设置overflow：hidden；这样3个元素就会受到父元素的宽度的限制。
如果父元素没有宽度，浮动的元素会脱离父元素的限制，按照它应该在的地方去放置，所以你要设置-600才行。
祝学习愉快！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星