Question

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

我想要的是：

http://i.imgur.com/f0TuWCp.png

缩放窗口时会发生什么：

http://i.imgur.com/6HWY2LD.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;
}

谢谢！

Answer 1

位置：绝对将元素拉出DOM渲染规则。编写的CSS告诉浏览器始终将这些元素放在X位置，无论元素或屏幕的大小如何。 List Apart有一篇很好的文章，可以很好地理解假定的工作方式：http://alistapart.com/article/css-positioning-101

删除定位，改为使用“display：”或“float：”属性。事情将开始根据DOM渲染规则流动。

此外，确保应用的CSS类具有功能或语义命名。避免使用引用设计处理的类，因为颜色/大/小等内容可以随时间变化，即“whitebackground”。使用诸如“client-name”或.theme之类的东西，然后声明该类或BODY标记的背景颜色，可以更好地提供代码。

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

Answer 2

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

另外，你应该考虑删除这个位置：绝对，因为它没有任何意义。而是完全删除它并添加display：block;

当窗口放大时，如何防止图像重叠？

2 个答案: