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 */
}

Working Example (JSFiddle)

Answer 2

我用jQuery找到了它。解决方案是使用“append”并使用div容器包装img。

和

$（ '＃image_status'）附加（ ''）;

Answer 3

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

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

jsfiddle

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

3 个答案:

溶液1（优选）：

解决方案2：