HTML/CSS Image grid

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代替img标签，我认为？和一些CSS，以便我可以放置x和y位置的小图像，以便在拼接在一起时占据与大图像相同的300x190。

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

什么是最好的HTML/CSS呢？

编辑：我需要处理这个任意的意义。所以这里有一对小图像，它们都有自己的x，y，而不是上面的简单例子。

Answer 1

使用absolute内relative定位。

参见：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 
} 

Answer 2

如果您已经在为此使用表格，为何不添加更多行/列来创建2x2网格并在其中输入每个图像。这将是最快的解决方案。

<table width="300" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td><img src="myimage1.jpg" width= "150" border="0"></td> 
    <td><img src="myimage2.jpg" width= "150" border="0"></td> 
    </tr> 
    <tr> 
    <td><img src="myimage3.jpg" width= "150" border="0"></td> 
    <td><img src="myimage4.jpg" width= "150" border="0"></td> 
    </tr> 
</table>