在使用百分比后调整窗口大小时如何使元素停止移动

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;
    }

1 个解决方案

#1

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.

你喜欢的是pecentage或pixel中的属性,所以你可以告诉divs扩展多少以及变小多少。

Hope it helps, if you post your code maybe i can be more useful.

希望它有所帮助,如果你发布你的代码,也许我会更有用。

Regards

EDIT 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中提出的课程做同样的事情。这个想法是让所有物品的位置相对并浮在左边,这样它们就不会移动了。应该管用!

#1