What ways can I put images in a grid-like format?

问题:

I have about 12-15 images that I want to align together in a grid, with text under each image. I thought about using a table, but I hear that tables aren't the best way to go these days. I tried a few other things, but nothing seemed to work the way I wanted it to.

An example of what I want it to look like would be something like this:

[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] --- Row 1

(--Description-) (-Description-) (-Description-) (-Description-)

[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] --- Row 2

(--Description-) (-Description-) (-Description-) (-Description-)

and so on...

What are some other methods, besides tables, that I should look into using? Any suggestions or references would be helpful.

回答1:

HTML:

<div class="floated_img">
    <img src="img.jpg" alt="Some image">
    <p>Description of above image</p>
</div>
<div class="floated_img">
    <img src="img2.jpg" alt="Another image">
    <p>Description of above image</p>
</div>

CSS:

.floated_img
{
    float: left;
}

You'll probably want some more styles, but that should do basically what you want.

回答2:

A grid like format? sounds like a table to me. There's nothing wrong with tables if you are using them for something that actually is a table.

回答3:

Since you said grid that means that the height and width will be fixed.

An inline-block might work very well for you. I find they are a little easier to work with than floats. And, inline-blocks respect the inherited align property(so you could have them centered)

CSS

.grid_element {
  display: inline-block;
  width: 200px;
  height:200px;
  zoom: 1;         /* for IE */
  display*:inline; /* for IE */
}

However, inline-block elements might not work so well on older browsers.

Some Reading:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html