Html 我的 CSS 有什么问题，将窗口调整为较小尺寸时元素会移动和重叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19385490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's wrong with my CSS , elements move and overlap when resizing window to smaller size?
提问by Stack Overflow
Ok , so below is my CSS AND HTML code. I have been using percentage for the divs so that those divs can re-adjust to bigger screen sizes . The annoying thing is that when I resize the window to a smaller size on my computer , those elements keep moving till they overlap and I don't want that . How can I use percentages to make those divs re-adjust to bigger resolutions , yet not move when resizing the window to a smaller size based on the CSS and HTML I have below
好的，下面是我的 CSS 和 HTML 代码。我一直在为 div 使用百分比，以便这些 div 可以重新调整以适应更大的屏幕尺寸。令人讨厌的是，当我在计算机上将窗口调整为较小的尺寸时，这些元素会一直移动直到它们重叠，而我不想要那样。如何使用百分比使这些 div 重新调整为更大的分辨率，但在根据下面的 CSS 和 HTML 将窗口大小调整为较小尺寸时不会移动
Here is the CSS
这是CSS
body{
background:#F4F4F4;
background-size:100%;
width:100%;
height:100%;
margin:0 auto;
min-width:1300px;
min-height:750px;
}
.logo{
position:absolute;
left:40%;
top:5%;
}
.logo_homepage{
position:absolute;
left:4%;
top:5%;
}
.homepage_slogan{
position:absolute;
left:3%;
top:45%;
}
.search_box{
position:absolute;
left:30%;
top:30%;
width:35%;
height:50%;
min-width:35%;
min-height:50%;
}
.user_info{
position:absolute;
left:75%;
height:100%;
width:20%;
min-width:20%;
background:white;
}
.header{
position:absolute;
top:0px;
width:100%;
min-width:98%;
height:100px;
min-height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:absolute;
top:60%;
left:40.5%;
}
.login{
position:absolute;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
#slides{
position:absolute;
top:20%;
width:50%;
background:transparent;
height:20%;
left:25%;
}
.socialfeeds{
position:absolute;
top:41%;
width:25%;
height:52%;
min-width:25%;
min-height:52%;
left:25%;
}
.heading{
position:absolute;
top:20%;
width:100%;
min-width:100%;
height:10%;
min-height:10%;
left:2%;
}
.bucket{
position:absolute;
top:18%;
left:20%;
width:13%;
min-width:13%;
}
.title{
position:absolute;
top:20%;
left:32%;
width:30%;
min-width:30%;
}
.feed_icons{
margin:20px;
}
.featured{
position:absolute;
top:30%;
width:30%;
min-width:30%;
background:transparent;
height:60%;
min-height:60%;
left:60%;
}
and the HTML
和 HTML
<body class="whitebackground">
<div class="header">
<div class="logo"><img draggable="false" src="/images/logo.png" /></div>
<div class="slogan"><img draggable="false" src="/images/slogan.png" /></div>
<div class="login"><a href="/twitter/redirect.php"><img draggable="false" src="/images/login.png" /></a></div>
</div>
<div class="bucket">
<span class="feed_icons"><a href="#"><img draggable="false" src="/images/bucket.png"/></a></span>
</div>
<div class="title">
<span class="feed_icons"><a href="#"><img draggable="false" src="/images/title.png"/></a></span>
</div>
<div class="socialfeeds">
<span class="feed_icons"><a href="#"><img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/></a></span>
</div>
<div class="featured"><img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /> </div>
<div class="footer"> <span style='margin-left:45%;'> COPYRIGHT 2013©</span></div>
</body>
回答by Roralee
Position: absolute pulls the elements out of the DOM rendering rules. The CSS as written tells the browser to always place these elements at X position no matter what size of the element or screen. A List Apart has an excellent article for getting a good grounding in how positining works: http://alistapart.com/article/css-positioning-101
Position: absolute 将元素从 DOM 渲染规则中拉出来。编写的 CSS 告诉浏览器始终将这些元素放置在 X 位置，无论元素或屏幕的大小如何。A List Apart 有一篇很好的文章，可以很好地了解定位的工作原理：http://alistapart.com/article/css-positioning-101
Remove the positioning and instead use either the "display:" or "float:" properties. Things will begin to flow according to the DOM rendering rules.
删除定位并改为使用“display:”或“float:”属性。事情将根据 DOM 渲染规则开始流动。
In addition, make sure applied CSS classes have functional or semantic naming. Avoid using classes that make reference to design treatment since things like colors/big/small can and do change over time., ie, "whitebackground". The code is much better served using something like the "client-name" or .theme and then declaring the background color for that class or on the BODY tag.
此外，确保应用的 CSS 类具有功能或语义命名。避免使用参考设计处理的类，因为诸如颜色/大/小之类的东西会随着时间的推移而发生变化，即“白色背景”。使用“客户端名称”或 .theme 之类的内容，然后为该类或在 BODY 标记上声明背景颜色，可以更好地为代码提供服务。
HTML Mark-up
HTML 标记
<body class="site-body">
<div class="header">
<div class="logo"><img draggable="false" src="/images/logo.png" /></div>
<div class="slogan"><img draggable="false" src="/images/slogan.png" /></div>
<div class="login"><a href="/twitter/redirect.php"><img draggable="false" src="/images/login.png" /></a></div>
</div>
<div class="bucket">
<span class="feed_icons"><a href="#"><img draggable="false" src="/images/bucket.png"/></a></span>
</div>
<div class="title">
<span class="feed_icons"><a href="#"><img draggable="false" src="/images/title.png"/></a></span>
</div>
<div class="socialfeeds">
<span class="feed_icons"><a href="#"><img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/></a></span>
</div>
<div class="featured"><img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /> </div>
<div class="footer"> <span style='margin-left:45%;'> COPYRIGHT 2013©</span></div>
</body>
CSS:
CSS：
.header {
height: auto;
overflow: hidden; /* clears floated child elements */
width: 100%;
min-width: 98%;
}
.logo, .slogan, .login {
display: inline-block;
}
/* or...
.logo, .slogan, .login {
float: left;
} */
.slogan {
margin-left: 40.5%;
}
回答by 3bu1
its better you use media-queries here...
最好在这里使用媒体查询...
@media all and (max-width: 60%) and (min-width: 30%) {
..........what ever you whant to do...................
}
for more info on media-queries vist css-media-queries
有关媒体查询的更多信息，请访问css-media-queries
