javascript - 如何在 html 或 javascript 中将 Img 附加到 Img

Question

您好我正在尝试制作状态栏，我在上一张图片之后添加了一些图片。让我解释清楚。

我有两个图像（gif）。猜猜白色 10x10 像素和黑色 10x10 像素。

<Img src='./black.gif>我在我的主页上使用这个标签。我想放在<Img src='./white.gif>后面<Img src='./black.gif>。

最后它看起来像这样

■□□■■□■□■

可以使用HTML吗？或任何好主意？

- - - - -添加

谢谢。其实我可以有更多的图像，它不是固定的。例如，我想附加一个与 1-3(green) 4-7(yellow) 8-10(red) 等值对应的图像。并且来自highcharts的数据动态更新。

Answer 1

解决方案1（首选）：

为什么不能只使用该background-repeat属性并使用 Photoshop 创建一个带有黑白方块的图像？如果您不能这样做，请参阅下面的另一种解决方案。

解决方案2：

您可以将图像包装在 a 中div并给它们 a float: left：

HTML：

<div>
    <div class="image_cont">
        <img src="white.jpg" />
    </div>
    <div class="image_cont">
        <img src="white.jpg" />
    </div>
</div>

CSS：

.image_cont{
    float: left; /* OR display: inline-block  OR  width: xx px */
}

工作示例（JSFiddle）

Answer 2

我用 jQuery 找到了它。解决方案是使用“附加”并将 img 与 div 容器包装在一起。

和

$('#image_status').append('');

Answer 3

用 div 容器包装图像并为其分配一个 id 即 (id) 然后使用这个 css 属性：

div#id img{
display: inline-block;
}

jsfiddle