У меня есть около 12-15 изображений, которые я хочу выровнять вместе в сетке с текстом под каждым изображением. Я думал об использовании таблицы, но я слышал, что эти таблицы не лучший способ пойти в эти дни. Я попробовал несколько других вещей, но ничего не работало так, как я этого хотел.
Пример того, что я хочу, чтобы это выглядело, будет примерно таким:
<---------- [----- Изображение -----] [----- Изображение -----] [----- Изображение -----] [----- Image- ----] --- Строка 1(- Описание-) (-Описание-) (-Описание-) (-Описание -)
<---------- [----- Изображение -----] [----- Изображение -----] [----- Изображение -----] [----- Image- ----] --- Строка 2(- Описание-) (-Описание-) (-Описание-) (-Описание -)
и т.д.
Какие еще методы, помимо таблиц, я должен изучить? Любые предложения или рекомендации будут полезны.
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;
}
Вам, вероятно, понадобится еще несколько стилей, но это должно делать в основном то, что вы хотите.
Сетка как формат? звучит как стол для меня. Там нет ничего плохого в таблицах, если вы используете их для чего-то, что на самом деле является таблицей.
Поскольку вы сказали, что сетка означает, что высота и ширина будут исправлены.
Встроенный блок может работать очень хорошо для вас. Я считаю, что им немного легче работать, чем плавать. И встроенные блоки уважают свойство унаследованного выравнивания (чтобы вы могли сосредоточить их)
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