HTML / CSS图像网格

Question

I am a back-end developer and I need a little help with some HTML/CSS to replace one large image with multiple small images. The smaller images should take up the exact same area as the larger image. Here's the HTML I have now for the larger image:

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

So the above works perfectly to display my large image. Now I want to replace the img tag with some divs, I think?, and some CSS so that I can place small images by x and y position so that when pieced together occupy the same 300x190 as the large image.

For example if I assume that the top left is 0, 0 and x increases as I go to the right and y increases as I go down and I'm placing my images using the x,y of the upper left hand corner. Then I could take two images that are both 150x190 and place the first at 0,0 and the second as 150,0.

What is the best HTML/CSS for this?

Edit: I need to handle this in an arbitrary sense. So there couple be a bunch of small images that all have their own x,y as opposed to the simple example above.

Answer 1

Use absolute inside relative positioning.

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

See: http://jsfiddle.net/zwwwt/

The inner div s could just as easily be img s.

<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

If your already using a table for this, why not just add more rows/columns to create your 2x2 grid and enter each image in there. It would be the fastest solution.

<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>