css - 用 css 在网格上排列图像，以一种简单且不吸吮的方式

Question

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

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

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

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

例如，您可以说将图片 1 放在第 1 行的第 2 block ，将图片 2 放在第 3 行的第 4 block ？

Answer 1

有很多方法可以处理它。我建议使用类(class)。一组绝对定位在 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">