Question

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

但是，当我添加热点代码<div id="hotspot-0" class="hotspot circle green" />时，布局会中断。到目前为止，我没有任何运气来解决这个问题。

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 code

$('#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>

html - div中的布局中断

1 个答案: