HTML/CSS 图像网格

Question

我是一名后端开发人员，我需要一些 HTML/CSS 方面的帮助，以便用多张小图片替换一张大图片。较小的图像应占据与较大图像完全相同的区域。这是我现在拥有的较大图像的 HTML:

<table border="0" cellspacing="0" cellpadding="0" width="300">
    <tr>
        <td>
            <img src="myimage.jpg" width= "300" height="190" border="0">
        </td>
   </tr>
</table>

所以上面的内容完美地显示了我的大图像。现在我想用一些 div 和一些 CSS 替换 img 标签，这样我就可以按 x 和 y 位置放置小图像，这样当拼凑在一起时占据与大图像相同的 300x190。

例如，如果我假设左上角是 0, 0 并且 x 随着我向右移动而增加，y 随着我向下移动而增加，并且我使用左上角的 x,y 放置我的图像.然后我可以拍摄两张都是 150x190 的图像，并将第一张放在 0,0，第二张放在 150,0。

什么是最好的 HTML/CSS？

编辑:我需要在任意意义上处理这个问题。因此，与上面的简单示例相反，有一堆小图像都有自己的 x,y。

Answer 1

在 relative 定位中使用 absolute。

参见: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

参见: http://jsfiddle.net/zwwwt/

内部 div 可以很容易地成为 img。

<div class="imageContainer">
    <div style="top: 0; left: 0; width: 100px; height: 50px"></div>
    <div style="top: 0; left: 100px; width: 200px; height: 50px"></div>
    <div style="top: 50px; left: 0; width: 150px; height: 150px"></div>
    <div style="top: 50px; left: 150px; width: 150px; height: 150px"></div>
</div>

.imageContainer {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid red
}
.imageContainer div {
    position: absolute;
    background: #ccc;
    outline: 1px dashed #000
}