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

Sta*_*low 13 html css css3

所以我在我的网页中有div,比如标题或div框..它们在较大的屏幕尺寸上调整得很好,这样它们在大显示器上看起来不会太小,但问题是当我调整窗口大小或浏览器使它变小,所有元素一直移动直到它们达到它们都会遇到的点并且变得丑陋.我怎样才能使得我已经调整到更大屏幕尺寸的div也变得更大,但是然后阻止它们当调整窗口大小使其变小时从窗口移动??? 我使用了我想重新调整的所有元素的百分比,并在更大/更宽的屏幕上做大

下面是我的代码示例..我的标题和这些类的其他元素移动到调整窗口大小时它们重叠的点

.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;
    }
Run Code Online (Sandbox Code Playgroud)

SBO*_*SBO 18

我不确定你的问题,因为你没有发布任何代码,但我认为你的解决方案可以使用css样式:

max-width:50%;
min-width:800px;
max-height:500px;
min-height:21%;
Run Code Online (Sandbox Code Playgroud)

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

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

问候

编辑1:

这应该可以解决您的问题:

*{
    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;
    }
Run Code Online (Sandbox Code Playgroud)

对你没有在CSS中提出的课程做同样的事情.这个想法是让所有物品的位置相对并浮在左边,这样它们就不会移动了.应该管用!