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

堆栈溢出

因此,我的网页中有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;
    }
SBO

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

max-width:50%;
min-width:800px;
max-height:500px;
min-height:21%;

属性可以根据需要选择以百分比或像素为单位,因此您可以告诉div扩展程度和缩小程度。

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

问候

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

只需对您未在CSS中发布的课程进行相同的操作即可。想法是让所有具有相对位置的项目浮动在左侧,这样它们就不会移动。应该管用!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何根据百分比调整窗口的内部宽度?

来自分类Dev

无法使用百分比调整HTML输入的大小

来自分类Dev

无法使用百分比调整HTML输入的大小

来自分类Dev

在 Bootstrap 中调整窗口大小时停止元素移动

来自分类Dev

如何强制jQuery调整大小以使用百分比?

来自分类Dev

如何调整使用的图表百分比?

来自分类Dev

CSS <p>在线百分比宽度随着窗口调整大小而缩小(左-右)

来自分类Dev

在窗口调整大小时将具有百分比高度的背景图像转换为像素高度

来自分类Dev

调整窗口元素大小时移动

来自分类Dev

img在div中未按百分比调整大小

来自分类Dev

图像调整大小百分比不同

来自分类Dev

Word:按百分比调整图像大小-宏

来自分类Dev

用百分比调整空div的大小

来自分类Dev

CSS HTML百分比调整大小图像

来自分类Dev

基于窗口大小百分比的JavaFX布局

来自分类Dev

如何在没有百分比的情况下调整弹性项目的大小?

来自分类Dev

使用百分比调整大小的输入在Webkit中无法正确呈现

来自分类Dev

当某些输入具有固定大小时,如何将一行多个输入的宽度设置为浏览器窗口宽度的百分比?

来自分类Dev

如何以百分比调整相对布局的宽度?

来自分类Dev

如何根据滚动百分比移动div

来自分类Dev

如何使用宽度和百分比调整边距和填充?

来自分类Dev

如何使用MediaWiki将图像的宽度缩放到窗口的百分比?

来自分类Dev

如何使用setStyleSheet更改QLabel小部件的字体大小(百分比)?

来自分类Dev

如何在不使用百分比 (%) 的情况下确定弹性项目的大小?

来自分类Dev

如何避免基于百分比的元素重叠?

来自分类Dev

如何在多个元素之间分配百分比?

来自分类Dev

以百分比设置按钮的大小

来自分类Dev

如何使用百分比而不是像素将背景图像设置为伪元素?

来自分类Dev

如何使用百分比均匀地分隔导航栏元素?

Related 相关文章

  1. 1

    如何根据百分比调整窗口的内部宽度?

  2. 2

    无法使用百分比调整HTML输入的大小

  3. 3

    无法使用百分比调整HTML输入的大小

  4. 4

    在 Bootstrap 中调整窗口大小时停止元素移动

  5. 5

    如何强制jQuery调整大小以使用百分比?

  6. 6

    如何调整使用的图表百分比?

  7. 7

    CSS <p>在线百分比宽度随着窗口调整大小而缩小(左-右)

  8. 8

    在窗口调整大小时将具有百分比高度的背景图像转换为像素高度

  9. 9

    调整窗口元素大小时移动

  10. 10

    img在div中未按百分比调整大小

  11. 11

    图像调整大小百分比不同

  12. 12

    Word:按百分比调整图像大小-宏

  13. 13

    用百分比调整空div的大小

  14. 14

    CSS HTML百分比调整大小图像

  15. 15

    基于窗口大小百分比的JavaFX布局

  16. 16

    如何在没有百分比的情况下调整弹性项目的大小?

  17. 17

    使用百分比调整大小的输入在Webkit中无法正确呈现

  18. 18

    当某些输入具有固定大小时,如何将一行多个输入的宽度设置为浏览器窗口宽度的百分比?

  19. 19

    如何以百分比调整相对布局的宽度?

  20. 20

    如何根据滚动百分比移动div

  21. 21

    如何使用宽度和百分比调整边距和填充?

  22. 22

    如何使用MediaWiki将图像的宽度缩放到窗口的百分比?

  23. 23

    如何使用setStyleSheet更改QLabel小部件的字体大小(百分比)?

  24. 24

    如何在不使用百分比 (%) 的情况下确定弹性项目的大小?

  25. 25

    如何避免基于百分比的元素重叠?

  26. 26

    如何在多个元素之间分配百分比?

  27. 27

    以百分比设置按钮的大小

  28. 28

    如何使用百分比而不是像素将背景图像设置为伪元素?

  29. 29

    如何使用百分比均匀地分隔导航栏元素?

热门标签

归档