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

Question

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

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

我在主页上使用此标签<Img src='./black.gif> 。 我想将<Img src='./white.gif> <Img src='./black.gif> 。

最终看起来像这样

■□□■■□■■■■

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

- - - - -加

谢谢。 实际上，我可以拥有更多图像，但它不是固定的。 例如，我要附加一个图像，其值对应于1-3（绿色）4-7（黄色）8-10（红色）。 并从highcharts数据动态更新。

Answer 1

解决方案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 */
}

工作示例（JSFiddle）

Answer 2

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

和

$（'＃image_status'）。append（''）;

Answer 3

用div容器包装图像并为其分配一个ID，即（id），然后使用以下CSS属性：

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

jsfiddle