在调整大小时不会停留在点上

每当我调整窗口大小时，即使所有的圆都相对于同一个窗口，圆也完全不在位。这是为什么？它们的定位方式相同，大小以％表示。任何帮助非常感谢。在调整大小时不会停留在点上

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

在调整大小时不会停留在点上

回答

相关问题