最近在学习html设计网页的时候遇到这样一个问题，问题描述如下：
总体设计为一个主div，id="main"，下属设置6个子div，如下如所示：
基础代码如下：
<style>
#main{
padding:10px;
}
#firstContent{
float:left;
}
#firstPhoto{
float:left;
}
#secondPhoto{
float:left;
clear:left;
}
#secondContent{
float:left;
}
#thirdContent{
float:left;
clear:left;
}
#thirdPhoto{
float:left;
}
.ContentPart{
width:600px;
height:400px;
margin:20px;
padding:15px;
}
</style>
<body>
<div id="main">
<div class="ContentPart" id="firstContent">
<p>
段落内容
</p>
</div>
<div id="firstPhoto">
<img src="图片1" width="650px" height="450px"/>
</div>
<div id="secondPhoto">
<img src="图片2" width="650px" height="450px" />
</div>
<div class="ContentPart" id="secondContent">
<p>
段落内容2
</p>
</div>
<div class="ContentPart" id="thirdContent">
<p>
段落内容3
</p>
</div>
<div id="thirdPhoto">
<img src="图片3" width="650px" height="450px" />
</div>
</div>
但是问题出现了，当我缩放浏览器的时候，整个布局都乱了，图片和文字段落都出现下移的情况；
如下：
解决办法：
在main这个div中设置固定值,将父div的宽度固定：
#main{
width:1300px;
padding:10px;
}
这时候调整浏览器和缩放网页都不会改变各div的布局！
笔者还在前端学习的路上，如果有错误地方欢迎读者帮忙指正，如果类似问题有更好的解决，欢迎读者提供见解！
扫一扫
1372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
