页面缩小时，左右两侧会掉下去，怎么处理？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;}
body{min-width: 900px;}
.header{
width: 100%;height: 100px;background: black;
}
.nav{
float: right;
width: 500px;
height: 100px;
}
nav{
float: left;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
}
.main{
padding: 0px 320px 0px 300px;
height: 1000px;
}
.middle,.left,.right{
position: relative;
float: left;
min-height: 300px;
height: 1000px;
}
.middle{
width: 100%;
background: pink;
}
.middle>img{
display: block;
margin: 20px auto;
}
.left{
width:300px;
margin-left: -100%;
left: -300px;
}
.right{
width: 320px;
margin-left: -320px;
right: -320px;
}
.left>ul{width: 300px;}
input{
width: 170px;
height: 30px;
margin:20px auto;
}
.denglu{
background-color: red;
}
span{
background-color: pink;
}
.footer{
width: 100%;
height: 100px;
background: black;
}
.footer1{
width: 600px;
height: 100px;
margin:0 auto;
}
.footer1>ul>li{
float: left;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
margin:0px 10px;
}
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
<div class="nav">
<nav>课程</nav>
<nav>职业路径</nav>
<nav>实战</nav>
<nav>猿问</nav>
<nav>手记</nav>
</div>
</div>
<div class="main">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg
" alt="">
</div>
<div class="left">
<h2>课程推荐</h2>
<ul>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li><br>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li><br>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li><br>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li><br>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
</ul>
</div>
<div class="right">
<h2>登录</h2>
<form action="#">
<input type="text" placeholder="请输入您的手机号码"><br>
<input type="password" placeholder="6-16位密码，区分大小写，不能有空格"><br>
<input class="denglu" type="button" name="登录" value="登录" >
</form>
</div>
</div>
<div class="footer">
<div class="footer1">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>15
收起
正在回答 回答被采纳积分+1
2回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星