Горизонтальное выравнивание блоков по ширине (мультистрочное)

Допустим имеется задача создать фотогалерею с горизонтальным выравниванием отдельных ее блоков (фотографий) по ширине.

И CSS-код, который эту фотогалерею визуализирует.

.gallery {
  width: 100%;
  margin: 10px 0;
  padding: 0;
  list-style-type: none;  
  outline: 1px solid green;  
  text-align: justify;
}

.photo {
  display: inline-block;
  height: 100px;
  width: 250px;
  margin: 0 0 20px;
  background-color: yellow;
  vertical-align: top;
}

Пока фотогалерея не выровнена.

Если добавить свойство text-align, то галерея растягивается по ширине как и задумано, за исключением последней строчки.

.gallery {
  width: 100%;
  margin: 10px 0;
  padding: 0;
  list-style-type: none;  
  outline: 1px solid green;  
  text-align: justify;
}

Для того, чтобы растянуть и последнюю строку тоже следует добавить следующий CSS-код.

.gallery:after {
  content: ' i i i i i ‘;
  word-spacing: 247px;
  padding-left: 247px;
/*   visibility: hidden; */
}

Дело в том, что text-align: justify; не действует на последнюю строчку, поэтому мы дополняем ее проблемами и символами i, чтобы последняя строчка стала НЕ последней.
Здесь буква i выбрана потому, что она имеет наименьшую толщину из всех букв. Примерно 3px. Исходя из этой толщины и высчитываются значение 247px -это ширина блока (250px) минус толщина буквы (3px). Количество букв i в свойстве content может быть равно максимальному количество фотографий, помещающихся в строку (в данном случае — 4).
Ну и надо не забыть скрыть буквы i от глаз. Полностью код CSS выглядит так:

.gallery {
  width: 100%;
  margin: 10px 0;
  padding: 0;
  list-style-type: none;  
  outline: 1px solid green;  
/*   text-align: justify; */
}

.gallery:after {
  content: ' i i i i i i i i ';
  word-spacing: 247px;
  padding-left: 247px;
  visibility: hidden;
}

.photo {
  display: inline-block;
  height: 100px;
  width: 250px;
  margin: 0 0 20px;
  background-color: yellow;
}

 

Метки: ,


«
»

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

-->