Question

每当我调整窗口大小时，圆圈就会完全不合适，即使它们都是相同的窗口。这是为什么？它们的位置相同，大小为％。非常感谢任何帮助。

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

Answer 1

删除不需要的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>

在调整大小时，Div不会留点

1 个答案: