Коллекция изображений: управление выравниванием

Для управления выравниванием изображений и комментариев в галерее в нескольких столбцах и строках необходимо использовать приемы, чтобы сохранить совместимость со всеми браузерами и их старыми версиями.

Изображения помещаются в список с тегами <li>, а свойство CSS show: inline-block приводит к тому, что они совпадают и больше не выравниваются по вертикали в виде списка .

Но для того, чтобы избежать переполнения и изменения структуры, когда изображениям или тексту требуется дополнительное пространство, нужно использовать ресурсы таблиц стилей...

HTML-код:

<ul class="gallery">
  <li><img ...><br>texte</li>
  <li>...
</ul>

Для каждой строки галереи создается новый список.

Код CSS:

.gallery li
{
  display:inline-block;
  width: 158px;
  min-height: 170px;
  vertical-align:top;
  text-align:center;
  padding:4px;
  zoom:1;
  *display: inline;
  _height: 170px;
  border:none;
}

Показ

Объяснения

Следующий код определяет рамку для каждого кадра со своим текстом с опцией inline-block, которая является частью спецификации CSS 2:

display:inline-block;
width:158px;
min-height:170px;
vertical-align:top;
text-align:center;
padding:4px;

Остальные варианты - для совместимости со старыми браузерами.

Добавить кадр

Можно изменить свойство border, которое позволяет создать рамку, например:

 border:1px solid gray;

См. также