实际上我正在使用PHP和CSS创建一个站点。但不幸的是,我预计会有一个非常烦人的问题。当我最小化浏览器窗口时,网站被彻底销毁。我的一张照片出现在不同的地方......
看看。
ABOVE: Normal, BELOW: When I minimize window
你有任何想法如何解决它?
HTML:
<div id="container">
<div id="menu">
<div style="float: left;">Hi,</div>
<div style="float: right; margin-right: 10px;">
<a href="#"><img src="images/ico/message.png"/></a>
<a href="#"><img src="images/ico/avatar.png"/></a>
</div>
</div>
<div id="sidebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec elit lacinia, iaculis neque nec, laoreet risus. Vestibulum faucibus nulla eu justo vulputate, vel varius lacus dapibus.
</div>
<div id="main">
<div id="left_grid"><img src="images/11.jpg" style="width: 260px;"/></div>
<div id="right_grid"><img src="images/9.jpg" style="width: 260px;"/></div>
</div>
<h1>Quick three steps</h1>
<div id="main_max">
<div id="left_image"><img src="images/computer.png" style=""/></div>
<div id="center_image"><img src="images/motivate.png" style=""/></div>
<div id="right_image"><img src="images/goals.png" style=""/></div>
</div>
<div id="footer"> ©2014</div>
</div>
CSS:
#container {
width: 780px;
margin: 0 auto;
background: #FFFFFF;
}
#menu {
font-size: 13px;
width: 740px;
height: 20px;
font-weight: bold;
color: #fff;
background: #375c73;
border-top: 1px dashed white;
padding: 6px 0 6px 40px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
#sidebar {
float: left;
width: 160px;
padding: 15px 0 0 10px;
font-size: 13px;
}
#left_grid {
float: left;
width: 270px;
margin: 0;
}
#right_grid {
margin: 0;
}
#main {
min-width: 550px;
width: 560px;
margin: 0 0 0 180px;
padding: 15px 40px 30px 0;
color: #444444;
font-size: 13px;
line-height: 18px;
}
#main_max {
width: 770px;
height: 120px;
padding: 0px 10px 30px 12px;
color: #444444;
font-size: 13px;
line-height: 18px;
}