3-3编程当页面宽度缩小到一定程度，中间部分的框架就散了，请问一下是什么原因造成的，怎么解决呢

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!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部分，完全乱掉了ﾍ(;´Д｀ﾍ)，请教老师原因和解决办法

满城烟花刹那芳华 2017-12-02

源自：CSS网页布局基础 3-4 双飞翼布局及案例

收起

1回答

白船袜七分裤回答被采纳获得+3积分 2017-12-02 15:12:57

body处的宽度设置的有点小。改为

1	`body{min-width: 1400px;}`

再试一试，我试过没问题。

收起回答

满城烟花刹那芳华提问者 #1

那就和自适应的初衷不符了呀，我想实现的效果是，当浏览器宽度缩小时，中间部分也会自适应的相对缩小，当宽度到达min-width时就不缩小了自动添加滚动条

2017-12-02 15:35:18
白船袜七分裤回复提问者满城烟花刹那芳华 #2

哪里不符？你中间的图片本身就要占一定的宽的，给body设置min-width就是用来保证你的页面在缩放到较小的时候，仍然能够像原先那样排版，设置最小宽度后再缩放就不变了。你做一下对比，试一下。 1.你把body那一句注释掉，刷新后把浏览器拖到最小，照样会散架。 2.设置body{min-width:1400px;},当浏览器的宽度小于1400px，之后，不会散架，每个部分都按照差不多的样式显示。

2017-12-02 15:45:18
满城烟花刹那芳华提问者回复白船袜七分裤 #3

啊哦，原来是这样呀，多谢谢大神的解释，我知道啦

2017-12-02 16:01:19