3-3编程 当页面宽度缩小到一定程度，中间部分的框架就散了，请问一下是什么原因造成的，怎么解决呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 900px;}
.header,.footer{
width: 100%;
height: 100px;
float: left;
background: black;
text-align: center;
}
.logo{cursor: pointer;float: left;}
.nav{
float: right;
/*border: 2px solid red;*/
}
.navword{display: inline;
cursor:pointer;
color:white;
font:22px/100px "宋体";
margin-left: 20px;
margin-right: 20px;
}
.navword:hover{color: orange;}
.content{
padding: 0 300px 0 350px;
overflow: hidden;
}
.middle,.left,.right{min-height: 550px;position: relative;float: left;}
.middle{
width: 100%;
background: #ffc0cb;
}
.img_m{
position: absolute;
top:50%;
margin-top: -200px;
left: 50%;
margin-left: -300px;
}
.left{
width:350px;
background: #ffefbd;
margin-left: -100%;
left:-350px;
position: relative;
}
.special{background: #f99;margin-right: 10px;}
p{margin-top: 20px;margin-right: 20px;}
span{cursor:pointer;}
.leftgroup{
position: absolute;
top:25%;
left: 8%;
}
.right{
width:300px;
background: #add8e6;
margin-left: -300px;
right:-300px;
position: relative;
}
.rightgroup{
position: absolute;
left: 8%;
top:25%;
}
input{height: 40px;width: 250px;margin:15px 0;}
button{display: block;
height: 40px;
width: 250px;
background: red;
color: white;
font-size: 20px;
}
.footerword{
color: white;
font:16px/100px "宋体";
display: inline;
cursor: pointer;
margin-left: 16px;
}
</style>
</head>
<body>
<div class="header">
<img class="logo" src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png">
<ul class="nav">
<li class="navword">课程</li>
<li class="navword">职业路径</li>
<li class="navword">实战</li>
<li class="navword">猿问</li>
<li class="navword">手记</li>
</ul>
</div>
<div class="content">
<div class="middle">
<img class="img_m" src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
</div>
<div class="left">
<div class="leftgroup">
<h1>课程推荐</h1>
<p><span class="special">职业路径</span><span>HTML5与CSS3实现动态网页</span></p>
<p><span class="special">职业路径</span><span>零基础入门Android语法与界面</span></p>
<p><span class="special">职业路径</span><span>iOS基础语法与常用控件</span></p>
<p><span class="special">职业路径</span><span>PHP入门开发</span></p>
<p><span class="special">职业路径</span><span>Java入门开发</span></p>
</div>
</div>
<div class="right">
<div class="rightgroup">
<h2>登录</h2>
<input type="text" name="name" placeholder="请输入登录邮箱/手机号">
<input type="password" name="password" placeholder="6-16位密码，区分大小写，不能用空格" size="16" maxlength="16">
<button>登录</button>
</div>
</div>
</div>
<div class="footer">
<ul>
<li class="footerword">网站首页</li>
<li class="footerword">企业合作</li>
<li class="footerword">人才招聘</li>
<li class="footerword">联系我们</li>
<li class="footerword">常见问题</li>
<li class="footerword">友情链接</li>
</ul>
</div>
</body>
</html>当浏览器宽度到小一定程度，中间content部分，完全乱掉了ﾍ(;´Д｀ﾍ)，请教老师原因和解决办法
29
收起
正在回答
1回答
body处的宽度设置的有点小。改为
body{min-width: 1400px;}再试一试，我试过没问题。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星