Блог

Главная - Вопросы по программированию - Попытка расположить карточки Material Design в шахматном порядке и равномерно распределить их по строкам

Попытка расположить карточки Material Design в шахматном порядке и равномерно распределить их по строкам

#html #css #material-design #material-design-lite

#HTML #css — код #material-design #material-design-lite #css

Вопрос:

Я использую этот шаблон MDL здесь:

https://getmdl.io/templates/portfolio/index.html

Как вы можете видеть, «карточки» выровнены по 3 столбцам.

С чем у меня возникают трудности, так это с попыткой расположить каждую строку «card» в шахматном порядке на 2 столбца, а затем на 3 столбца и так далее.

Проблема с удалением 3-й карты и просто оставлением двух карт заключается в том, что карты распределяются неравномерно на странице. В развороте из 3 столбцов у вас есть ЛЕВЫЙ, СРЕДНИЙ и ПРАВЫЙ. Когда вы удаляете 3-ю карту, две карты появляются в ЛЕВОМ и СРЕДНЕМ столбцах, оставляя правый столбец неудобно пустым.

Я пытаюсь попробовать что-то вроде этого:

введите описание изображения здесь

Комментарии:

1. Можете ли вы предоставить фрагмент html / css / js? или перефразировать вопрос? Я не совсем понимаю проблему

Ответ №1:

Используйте ‘justify-content: center’ для (внешнего) класса ‘portfolio-max-width’:

 .portfolio-max-width {
    max-width: 900px;
    margin: auto;
    justify-content: center;    /*This will center the interior elements*/
}