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>