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

Question

你好，我正在尝试使状态栏，我添加了一些图像后的前一个图像。让我解释清楚。

我有两张图片(Gif)。估计是白色10x10px和黑色10x10px。

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

最后，它看起来像这样

有没有可能使用HTML？或者有什么好主意？

--添加

谢谢。实际上我可以有更多的图像，而且它不是固定的。例如，我想添加一个与值1-3(绿色)4-7(黄色)8-10(红色)相对应的图像。和来自highcharts的数据动态更新。

Answer 1

我在jQuery那里找到的。解决方案是使用"append“并用div容器包装img。

和

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

Answer 2

解决方案1(首选)：

为什么你不能使用background-repeat属性并使用Photoshop来创建一个黑白方块的图像呢？如果您不能做到这一点，请参阅下面的其他解决方案。

解决方案2：

您可以将图像包装在div中，并为它们提供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 */
}

Answer 3

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

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

jsfiddle