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

Question

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

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

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

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

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

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

и так далее ...

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

Answer 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;
}

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

Answer 2

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

Answer 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