Какие способы можно поместить изображения в виде сетки?

У меня есть около 12-15 изображений, которые я хочу выровнять вместе в сетке с текстом под каждым изображением. Я думал об использовании таблицы, но я слышал, что эти таблицы не лучший способ пойти в эти дни. Я попробовал несколько других вещей, но ничего не работало так, как я этого хотел.

Пример того, что я хочу, чтобы это выглядело, будет примерно таким:

<---------- [----- Изображение -----] [----- Изображение -----] [----- Изображение -----] [----- Image- ----] --- Строка 1

(- Описание-) (-Описание-) (-Описание-) (-Описание -)

<---------- [----- Изображение -----] [----- Изображение -----] [----- Изображение -----] [----- Image- ----] --- Строка 2

(- Описание-) (-Описание-) (-Описание-) (-Описание -)

и т.д.

Какие еще методы, помимо таблиц, я должен изучить? Любые предложения или рекомендации будут полезны.

Ответ 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;
}

Вам, вероятно, понадобится еще несколько стилей, но это должно делать в основном то, что вы хотите.

Ответ 2

Сетка как формат? звучит как стол для меня. Там нет ничего плохого в таблицах, если вы используете их для чего-то, что на самом деле является таблицей.

Ответ 3

Поскольку вы сказали, что сетка означает, что высота и ширина будут исправлены.

Встроенный блок может работать очень хорошо для вас. Я считаю, что им немного легче работать, чем плавать. И встроенные блоки уважают свойство унаследованного выравнивания (чтобы вы могли сосредоточить их)

CSS

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

Однако элементы встроенного блока могут работать не так хорошо в старых браузерах.

Некоторые чтения:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html