Случайное пространство в списке HTML-галереи, как удалить/исправить?

Question

Сайт, о котором идет речь: https://s123c.github.io/design.html

Я пытаюсь составить список элементов в галерее портфолио 3 x 4. Однако у меня есть пробелы (3 элемента по ширине) между первым изображением и началом строки. Я пытался искать похожие темы, но я не могу найти ничего похожего на мои проблемы, поскольку решения не совпадают.

Answer 1

Flaxbox - это удивительное свойство для прокладки элементов. Я быстро просмотрел веб-сайт, и если вы просто добавите ul {display: flex} в конец вашего .css-файла, вы больше не увидите проблему.

Или удалите текущий код макета для #gallery и добавьте следующее.

.container-a4 { 
    display: table; 
} 
.caption-style-4 { 
    display: table-row; 
} 

.caption-style-4 li { 
    display: table-cell; 
} 

Answer 2

Одним из эффективных решений было бы использовать фреймворк, такой как Foundation, поэтому такие вещи, как горизонтальная прокрутка, не произойдут и помогут вам создать мобильную версию для веб-сайта. Я уверен, что структура поможет вам решить эту проблему.

, конечно, это произойдет, только если вы правильно используете фундамент, он прост в использовании.

Answer 3

Вам не нужно ничего использовать, просто вставьте эту строку в свой код стиля. Таблица отображения, таблица-строка и табличная ячейка иногда вызывает проблему, поэтому лучше использовать список с плавающими элементами.

.row { 
    overflow: auto; 
} 

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

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