Горизонтальное выравнивание блоков по ширине (мультистрочное)
27 мая 2017 | CSS
Допустим имеется задача создать фотогалерею с горизонтальным выравниванием отдельных ее блоков (фотографий) по ширине.
И 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;
}