css - 以一种简单且不糟糕的方式在网格上排列带有 CSS 的图像

Question

我有这个网格，58x58 块。这个网格有一个背景图像，我想在某些块上放置一些图像。所以我使用了下面的代码：

<div style="position: relative !important; right: 0px" id="div">
   <img src="/6f89ab34.jpg">
</div>

这只是痛苦，因为每个元素都与之前的元素相关。

有没有更好更聪明的方法来解决这个问题？

例如，您可以说将图像 1 放在第 1 行第 2 块上，将图像 2 放在第 3 行第 4 块上？

Answer 1

有很多方法可以处理它。我建议使用类。一组绝对定位在 x 轴上，另一组绝对定位在 y 轴上。

.tile {position: absolute;}

.x1 {left: 0px;}
.x2 {left: 58px;}
.x3 {left: 116px;}

.y1 {top: 0px;}
.y2 {top: 58px;}
.y3 {top: 116px;}

然后可以使用类定位每个项目：

<div class="tile x1 y3">