最近在學習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的佈局！
筆者還在前端學習的路上，如果有錯誤地方歡迎讀者幫忙指正，如果類似問題有更好的解決，歡迎讀者提供見解！