在調整大小時不會停留在點上

每當我調整窗口大小時，即使所有的圓都相對於同一個窗口，圓也完全不在位。這是爲什麼？它們的定位方式相同，大小以％表示。任何幫助非常感謝。在調整大小時不會停留在點上

HTML：

<div id="product-right"> 
    <div id="circle-container"> 
     <div id="circle-1" class="circle" onclick="changeparagraph1()"></div> 
     <div id="circle-2" class="circle" onclick="changeparagraph2()"></div> 
     <div id="circle-3" class="circle" onclick="changeparagraph3()"></div> 
     <div id="circle-4" class="circle" onclick="changeparagraph4()"></div> 
     <div id="circle-5" class="circle" onclick="changeparagraph5()"></div> 
     <div id="circle-6" class="circle" onclick="changeparagraph6()"></div> 
     <div id="circle-7" class="circle" onclick="changeparagraph7()"></div> 
     <div id="circle-8" class="circle" onclick="changeparagraph8()"></div> 
     <img src="img/gun.svg" alt="gun"> 
    </div> 
</div>

CSS：

#product #product-right { 
    height:100%; 
    line-height:100%; 
    float:left; 
    width:50%; 
    position:relative; 
} 

#product-right img { 
    height:100%; 
    width:100%; 
    display:block; 
    margin:0 auto 0 auto; 
    pointer-events: none; 
} 

#circle-container { 
    height:80%; 
    width:80%; 
    position:relative; 
    margin:3vw 10% 0 10%; 
    overflow:hidden; 
} 

.circle { 
    position: absolute; 
    cursor: pointer; 
    width: 11px; 
    height: 11px; 
    border-radius: 50%; 
    background-color:#666666; 
    border: 5px solid transparent; 
    box-shadow: 0 0 0 1px #666666; 
    background-clip: padding-box; 
} 

#circle-1 { 
    top:5vw; 
    right:7vw; 
} 

#circle-2 { 
    top:22.5%; 
    right:27.5%; 
} 

#circle-3 { 
    top:22.5%; 
    right:22.5%; 
} 

#circle-4 { 
    top:31%; 
    left:37.5%; 
} 

#circle-5 { 
    top:22.5%; 
    right:17.5%; 
} 

#circle-6 { 
    top:50%; 
    left:32.5%; 
} 

#circle-7 { 
    top:82%; 
    left:24%; 
} 

#circle-8 { 
    top:9%; 
    left:28%; 
}

來源

2016-09-09 Calvarium

嘗試做這樣的：在HTML代碼編輯img標籤是' gun '在CSS代碼添加這個'img.editimg {width：auto; }'也許它不會工作，但嘗試它。 – Laith

由於您以百分比形式設置位置，所以圈子從位置移動..使用表格並嘗試 – Komal

@Komal您是什麼意思「使用表格」？ – Calvarium

刪除不需要的CSS

<div id="product-right"> 
     <div id="circle-container"> 
     <table> 
      <tr> 
      <td> 
      <div id="circle-1" class="circle" onclick="changeparagraph1()"></div></td> 
      <td> 
      <div id="circle-2" class="circle" onclick="changeparagraph2()"></div></td> 
      <td> 
      <div id="circle-3" class="circle" onclick="changeparagraph3()"></div></td> 
      <td> 
      <div id="circle-4" class="circle" onclick="changeparagraph4()"></div></td> 
      </tr> 
     </table> 
     </div> 
    </div>

來源

2016-09-09 13:12:02 Komal

在調整大小時不會停留在點上

回答

相關問題