html - div 内的布局中断答案

【问题标题】：html - Layout breaks within a divhtml - div 内的布局中断
【发布时间】：2014-09-02 00:56:08
【问题描述】：

我遇到了一段 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代码

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

    });

【问题讨论】：

看起来在 chrome 中工作正常。你遇到了什么布局问题？
Here is a list 的 void 元素使用 HTML5 文档类型。 <div> 不是 void 元素。使用<div id="hotspot-0" class="hotspot circle green"></div>
我不清楚这个“热点”应该在哪里。不能用%值定位吗？

标签： jquery html css layout

【解决方案1】：

div 元素不是自结束标记，因此<div attributes=""/> 无效。试试<div></div>

【讨论】：