jquery - html - div 内的布局中断

Question

我遇到一段 html 和 css 代码的问题。我需要在图像上放置一个热点。我不知道图像的尺寸，它可以小也可以大。通过结合使用容器和包装器，我将大图像缩放到页面的宽度。这对于小图像也很有用，因为它们位于页面的中心。

不过什么时候加热点码<div id="hotspot-0" class="hotspot circle green" /> , 布局中断。到目前为止，我还没有解决这个问题的运气。

链接到 jsfiddle

html代码:

<div class="imgContainer">
    <div class="imgWrapper">
        <img id="imgDisplay" src="http://wethecampbells.net/wp-content/uploads/2013/09/sun.jpg" />

        <div id="hotspot-container">
            <div id="hotspot-0" class="hotspot circle green" />
        </div>
    </div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

CSS代码

.page {
    width: 960px;
    margin:auto;
}

.imgContainer {
    margin-left:auto;
    margin-right:auto;
    min-height:150px;
    text-align:center;
    display:flex;
    flex-direction:column;
    border: 2px solid red;
}

.imgWrapper {
    margin:auto;
    display:inline-block;
    position:relative;
    border: 2px solid green;
}

#hotspot-container {
    position:absolute;
    left:0;
    top:0;
    visibility:hidden;
    border: 2px dotted white;
    width:20px;
    height:20px;
}

.hotspot {  
    width:100%;
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.hotspot:hover {
    cursor:pointer;
}

.circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius:50%;
}

.green {
    background-color: #00a700;
    border: 2px solid #008000;
    box-shadow: 0 0 3px #00a700;
}

js代码

$('#imgDisplay').click(function(e){
        var x = Math.round(e.pageX - $(this).offset().left);
        var y = Math.round(e.pageY - $(this).offset().top);

        // get the real dimension of the image
        var w = document.getElementById("imgDisplay").naturalWidth;
        var h = document.getElementById("imgDisplay").naturalHeight;

        var spotWidth = $("#hotspot-container").width();
        x -= Math.round(spotWidth / 2);
        y -= Math.round(spotWidth / 2);

        x = x / w * 100;
        y = y / h * 100;

        $('#hotspot-container').css('left', "" + x + "%").css('top', "" + y + "%").css('visibility', 'visible');

    });

Answer 1

div元素不是自闭标签，所以 <div attributes=""/>无效。尝试 <div></div>