css position when resizing browser
Question
When resizing the browser I noticed that all the elements get out of place and the website layout gets distorted. This also occurs on with low-resolution.
Is this because I have used position:relative; ? How can I make the page elements not move from their position when resizing.
body{
background:url(../img/bg-silver.jpg) #F2F2F2;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:11px; line-height:18px; color:#636363;
margin-top:10%;
}
#containerHolder {
background: #eee;
padding: 5px;
position:relative;
}
#container {
background: #fff;
background:rgba(245,245,245,0.8);
border: 1px solid #ddd;
}
#main {
margin: 0 0 0 20px;
padding: 0 19px 0 0;
}
2 answers
solution1
1 2011-11-27 17:49:08
如果没有看到你的html代码，但在外容器上使用css样式“min-width”（可能是哪个元素）应该可以解决问题，这是不可能的。
solution2
1 ACCPTED 2011-11-27 17:49:40
That usually only happens with float s. In any regard what you want to do is create a wrapper div with the width you want, and then just set overflow to scroll:
HTML:
<body>
<div id="wrapper">
<!-- content here -->
</div>
</body>
CSS:
#wrapper {
width:980px;
overflow-x:scroll;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.