如何在窗口放大時防止圖像重疊？

當我使窗口變大時，圖像隨着它變大並最終相互重疊。如何在窗口放大時防止圖像重疊？

我希望它是什麼：

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

謝謝！

來源

2014-10-29 Anthoney Kalasho

你可以創建jsfiddle或者提供網址 – 2014-10-29 18:02:51

位置：絕對拉出DOM渲染規則中的元素。所寫的CSS告訴瀏覽器總是將這些元素放置在X位置，而不管元素或屏幕的大小如何。列表除了有一個很好的文章，以獲得良好的基礎，如何positining工作：http://alistapart.com/article/css-positioning-101

刪除定位，而是使用「display：」或「float：」屬性。事情將根據DOM渲染規則開始流動。

此外，確保應用的CSS類具有功能或語義命名。避免使用參照設計處理的類，因爲諸如顏色/大/小可以並且確實會隨時間而變化，即「whitebackground」。使用「客戶端名稱」或.theme之類的代碼後，代碼會更好，然後爲該類或BODY標籤聲明背景顏色。

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

來源

2014-10-29 18:03:21

謝謝，你幫了大忙！改變「位置：絕對;」到「顯示：塊;」解決了縮放問題，但它創造了另一個。我在「.spinner」類中使用「position：absolute」來將圖像堆疊在一起。如果我失去了「位置：絕對」的形象停止縮放像我想要的，但他們停止堆疊。再次感謝！ – 2014-10-29 18:16:59

@AnthoneyKalasho將微調包裹在'div'中，給出'div'' display：block'，然後微調內部的元素'position：absolute' – starvator 2014-10-29 18:22:13

@starvator我做到了，但沒有改變任何東西 – 2014-10-29 18:30:09

而不是使用百分比爲您的按鈕和旋轉器的寬度的，給它一個固定的寬度，例如300像素。

此外，你應該考慮刪除該位置：絕對的，因爲它沒有任何目的。相反，完全刪除它並添加顯示：塊;

來源

2014-10-29 18:05:14 chdltest

如何在窗口放大時防止圖像重疊？

回答

相關問題