Html 使用百分比后调整窗口大小时如何使元素停止移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19367217/
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
How to make elements stop from moving when resizing the window after using percentage
提问by Stack Overflow
So I have divs that I have within my webpage .. like header , or div boxes .. they adjust fine on bigger screen sizes so that they dont look too tiny on a big monitor , but the issue is that when I resize the window or browser to make it small , all the elements move along till they reach a point where they all meet and it gets ugly .. How can I make it so the divs I have adjust to bigger screen sizes becoming bigger as well , but then stop them from moving along with the window when resizing the window making it smaller ??? I used percentages from all the elements I want to readjust and make bigger on bigger /wider screens
所以我在我的网页中有 div .. 像标题，或 div 框.. 它们在更大的屏幕尺寸上调整得很好，这样它们在大显示器上看起来不会太小，但问题是当我调整窗口大小或浏览器使其变小，所有元素都移动直到它们到达一个点，它们都相遇并变得丑陋..我怎样才能使它适应更大的屏幕尺寸也变得更大，但然后停止它们在调整窗口大小时随着窗口移动使其变小？？？我使用了所有元素的百分比，我想重新调整并在更大/更宽的屏幕上放大
Below is an example of my code .. my header and other elements with these classes move to the point where they overlap when resizing the window
下面是我的代码示例.. 我的标题和其他具有这些类的元素在调整窗口大小时移动到它们重叠的点
.header{
position:absolute;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:absolute;
top:60%;
left:40.5%;
}
.login{
position:absolute;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
回答by SBO
I'm not sure about your question because you didn't post any code but i think that your solution can be using css style:
我不确定您的问题，因为您没有发布任何代码，但我认为您的解决方案可以使用 css 样式：
max-width:50%;
min-width:800px;
max-height:500px;
min-height:21%;
properties in pecentage or pixel as you prefer, so you can tell divs how much expand and how much get smaller.
根据您的喜好以百分比或像素为单位的属性，因此您可以告诉 div 扩大多少以及缩小多少。
Hope it helps, if you post your code maybe i can be more useful.
希望它有所帮助，如果您发布您的代码，也许我会更有用。
Regards
问候
EDIT 1:
编辑 1：
This should resolve your problem:
这应该可以解决您的问题：
*{
margin: 0;
padding: 0;
text-decoration: none;
color: inherit;
}
.header{
position:relative;
float:left;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:relative;
float:left;
top:60%;
left:40.5%;
}
.login{
position:relative;
float:left;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
Just do the same with the class you didn't poste in css. The idea is having all items with position relative and floated on the left so they don't move. Should work!
只需对您未在 css 中发布的类执行相同操作即可。这个想法是让所有项目都具有相对位置并浮动在左侧，因此它们不会移动。应该管用！
