如何在放大窗口时防止图像重叠

当我使窗口变大时，图像会随之缩放，并最终相互重叠。

我想要的是：

https://i.stack.imgur.com/MUIhH.png

当我缩放窗口时会发生什么：

https://i.stack.imgur.com/c1aCn.png

Html:

<html>
<head>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="styleE.css">
    <script type="text/javascript" src="JQuery.js"></script>
    <script type="text/javascript" src="JQueryAnimation.js"></script>
    <script type="text/javascript" src="draw.js"></script>
    <img src="Sprites/Button.png" width="25%" id="triggerButton" style="top:50px;">
    <img src="Sprites/Primary.png" width="17%" id="primaryButton" style="top:150px;">

    </br>
        <img src="Sprites/1.png" width="15%" id="wedge1" style="top:600px;" class="spinner">
        <img src="Sprites/2.png" width="15%" id="wedge2" style="top:600px;" class="spinner">
        <img src="Sprites/3.png" width="15%" id="wedge3" style="top:600px;" class="spinner">
        <img src="Sprites/4.png" width="15%" id="wedge4" style="top:600px;" class="spinner">
        <img src="Sprites/5.png" width="15%" id="wedge5" style="top:600px;" class="spinner">
        <img src="Sprites/6.png" width="15%" id="wedge6" style="top:600px;" class="spinner">
        <img src="Sprites/7.png" width="15%" id="wedge7" style="top:600px;" class="spinner">
        <img src="Sprites/8.png" width="15%" id="wedge8" style="top:600px;" class="spinner">
        <img src="Sprites/9.png" width="15%" id="wedge9" style="top:600px;" class="spinner">
        <img src="Sprites/10.png" width="15%" id="wedge10" style="top:600px;" class="spinner">
        <img src="Sprites/11.png" width="15%" id="wedge11" style="top:600px;" class="spinner">
        <img src="Sprites/12.png" width="15%" id="wedge12" style="top:600px;" class="spinner">
</body>

Css:

#triggerButton {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
}
#primaryButton {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
}
.spinner{
    transform-origin:top left;
    position: absolute;
    right: 0;
    left: 12%;
    width: auto;
    max-width:11%;
    margin: auto;
}

谢谢！

Position：absolute从DOM呈现规则中提取元素。所编写的CSS告诉浏览器无论元素或屏幕大小如何，都要始终将这些元素放在X位置。A List Apart有一篇很好的文章，可以很好地了解定位的工作原理：http://alistapart.com/article/css-positioning-101

删除定位，改为使用"display:"或"float:"属性。事情将开始按照DOM呈现规则进行。

此外，请确保应用的CSS类具有函数或语义命名。避免使用引用设计处理的类，因为颜色/大/小之类的东西会随着时间的推移而改变。，即"白背景"。使用"客户端名称"或.theme之类的东西，然后声明该类或BODY标记的背景颜色，代码会更好。

https://stackoverflow.com/a/19385846/4064180

不要对按钮和微调器的宽度使用百分比，而是给它一个固定的宽度，比如300px。

此外，你应该考虑取消这个职位：绝对的，因为它对你没有任何作用。相反，完全删除它并添加display:block；

相关内容

最新更新

热门标签：