html - 如何在 HTML 元素中绘制一个框？

Question

我有一个生成 HTML 的 Web 应用程序，大致如下所示:

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
    </div>
    <span>Version 1.0</span>
</div>

大致是这样的:

服务器端处理为我提供了我想要突出显示的图像内坐标(例如，通过在图像顶部绘制一个红色框)。我希望做的是:

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
        <div id="highlight" style="width:30px;height:10px;top:10px;left:10px"/>
    </div>
    <span>Version 1.0</span>
</div>

(坐标由服务器在 HTML 源代码中生成)大致如下所示:

与:

#highlight: {
   position: absolute;
   border: 2px solid red;
}
#element: {
   position: relative;
}

但我得到的是:

最后一个跨度位于刚刚关闭的元素内部。我错过了什么？

更新

我编辑了问题以消除拼写错误，但留下了实际导致问题的错误。

Answer 1

很多错误!

错误一:

<div id="highlight" style="width:30px;height:10px;top:10px;left:10px!!!!!/>

缺少结束引号:

<div id="highlight" style="width:30px;height:10px;top:10px;left:10px"/>

错误2:

div 无法自行关闭:

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
        <div id="highlight" style="width:30px;height:10px;top:10px;left:10px"!!!!/>
    </div>
    <span>Version 1.0</span>
</div>

固定:

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
        <div id="highlight" style="width:30px;height:10px;top:10px;left:10px"></div>
    </div>
    <span>Version 1.0</span>
</div>