能帮我测试一下吗，class="right"显示为何不会移动到预想的方位上？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding: 0;}
.header,.footer{width: 100%;height: 100px;background: black;float: left;}
.logo{width: 40%;line-height: 100px;float: left;}
.title{width: 60%;float: right;}
.title .list{height: 100px;line-height: 100px;float: right;margin: 0 50px;}
a{list-style-type: none;text-decoration: none;color: #fff;font: bold 1.5em "微软雅黑";}
a:hover{color: orange;}
.title0{width: 70%; height: 100px; margin: 0 20%; }
.title0 .list{height: 100px;line-height: 100px;float: left;margin: 0 4%;}
.centent{ padding: 0 300px 0 350px;}
.center,.left,.right{position: relative;float: left;min-height: 800px;}
.center{width: 100%;background-color: pink;}
.left{width: 350px;background-color: gray;margin-left: -100%;left: -350px;}
.right{width: 300px;background: #ccc;margin-left: -300px;right: -300px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" /></div>
<ul class="title">
<li class="list"><a href="#">课程</a></li>
<li class="list"><a href="#">职业路径</a></li>
<li class="list"><a href="#">实战</a></li>
<li class="list"><a href="#">顾问</a></li>
<li class="list"><a href="#">手记</a></li>
</ul>
</div>
<div class="centent">
<div class="center">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
</div>
<div class="left">
<h2>课程推荐</h2>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> iOS基础语法与常用控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="right">
<h2>登录</h2>
<p><input type="text" name="yh" placeholder="请输入账号"></p>
<p><input type="password" name="yh" placeholder="请输入密码"></p>
<p><input class="bt" type="Submit" name="dl" value="登录" ></p>
</div>
</div>
<div class="footer">
<ul class="title0">
<li class="list"><a href="#">网站首页</a></li>
<li class="list"><a href="#">企业合作</a></li>
<li class="list"><a href="#">人才招聘</a></li>
<li class="list"><a href="#">联系我们</a></li>
<li class="list"><a href="#">常见问题</a></li>
<li class="list"><a href="#">友情链接</a></li>
</ul>
</div>
</body>
</html>
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星