为什么我设置左侧内容的外边距会吧右边的内容挤到下边
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
margin: 0 auto;
}
ul{
list-style: none;
}
.container{
width: 100%;
}
.header{
width: 100%;
height: 100px;
background: black;
overflow: hidden;
zoom:1;
}
.header .logo{
float: left;
}
.header .nav{
float: right;
color: #ffffff;
overflow: hidden;
zoom:1;
margin:0 70px;
}
.nav li{
float: left;
line-height: 100px;
padding: 0 30px;
font-family: '微软雅黑';
font-size: 18px;
}
.content{
width: 100%;
height: 600px;
background: #add8e6;
margin: 0 auto;
}
h3{
padding-top: 80px;
padding-bottom: 10px;
}
span{
background: #f99;
}
.left{
float: left;
width: 50%;
margin-left: 40px;
}
.left ul{
line-height: 30px;
display: block;
}
.right{
float: right;
width: 50%;
}
.right ul{
line-height: 30px;
}
.footer{
width: 100%;
height: 100px;
background: black;
text-align: center;
line-height: 100px;
}
.footer-nav{
color: #ffffff;
overflow: hidden;
zoom:1;
display: inline-block;
}
.footer-nav li{
float: left;
padding: 0 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
</div>
<ul class="nav">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="content">
<div class="left">
<h3>课程推荐</h3>
<ul>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span> 零基础入门Android语法与界面</li>
<li><span>职业路径</span> IOS基础语法与常用控件</li>
<li><span>职业路径</span> PHP入门开发</li>
<li><span>职业路径</span> JAVA入门开发</li>
</ul>
</div>
<div class="right">
<h3>相关课程</h3>
<ul>
<li>HTML CSS javaScript</li>
<li>HTML5 CSS3 jquery</li>
<li>移动端基础 移动端APP开发</li>
</ul>
</div>
</div>
<div class="footer">
<ul class="footer-nav">
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星