Как разместить блоки в два ряда?
Пытаюсь разместить блоки в два ряда, но не получается, не могу понять, что нужно заюзать
<div class="prez"> <div class="corpus"> <div class="corpus-image"> <img src="img/правила%201.png" alt="Фото клуба"> </div> <div class="corpus-info"> <div class="corpus-name"> <h2>С12312313ч</h2> </div> <div class="corpus-tag"> <p>Президент</p> </div> <div class="corpus-contact"> <p>+7 123123</p> </div> <div> <img src="img/img.png"> </div> </div> </div> <div class="corpus"> <div class="corpus-image"> <img src="img/правила%201.png" alt="Фото клуба"> </div> <div class="corpus-info"> <div class="corpus-name"> <h2>С12312313ч</h2> </div> <div class="corpus-tag"> <p>Президент</p> </div> <div class="corpus-contact"> <p>+7 123123</p> </div> <div> <img src="img/img.png"> </div> </div> </div> <div class="corpus"> <div class="corpus-image"> <img src="img/правила%201.png" alt="Фото клуба"> </div> <div class="corpus-info"> <div class="corpus-name"> <h2>С12312313ч</h2> </div> <div class="corpus-tag"> <p>Президент</p> </div> <div class="corpus-contact"> <p>+7 123123</p> </div> <div> <img src="img/img.png"> </div> </div> </div> </div> |
<div class="prez"> <div class="corpus"> <div class="corpus-image"> <img src="img/правила%201.png" alt="Фото клуба"> </div> <div class="corpus-info"> <div class="corpus-name"> <h2>С12312313ч</h2> </div> <div class="corpus-tag"> <p>Президент</p> </div> <div class="corpus-contact"> <p>+7 123123</p> </div> <div> <img src="img/img.png"> </div> </div> </div> <div class="corpus"> <div class="corpus-image"> <img src="img/правила%201.png" alt="Фото клуба"> </div> <div class="corpus-info"> <div class="corpus-name"> <h2>С12312313ч</h2> </div> <div class="corpus-tag"> <p>Президент</p> </div> <div class="corpus-contact"> <p>+7 123123</p> </div> <div> <img src="img/img.png"> </div> </div> </div> <div class="corpus"> <div class="corpus-image"> <img src="img/правила%201.png" alt="Фото клуба"> </div> <div class="corpus-info"> <div class="corpus-name"> <h2>С12312313ч</h2> </div> <div class="corpus-tag"> <p>Президент</p> </div> <div class="corpus-contact"> <p>+7 123123</p> </div> <div> <img src="img/img.png"> </div> </div> </div> </div>
.corpus { display: flex; margin-right: 165px; } .corpus-image img { margin-right: 20px; /* Отступ между фото и списком */ } .corpus-info { flex-grow: 1; /* Занимает всю оставшуюся ширину */ flex-direction: column; /* Элементы внутри располагаются в столбец */ justify-content: space-between; /* Распределение пространства между элементами */ max-width: 391px; } .corpus-name h2 { color: var(--BLACK, #040520); font-family: Manrope, sans-serif; font-size: 28px; font-style: normal; font-weight: 800; line-height: normal; margin-bottom: 25px; } .corpus-tag p { color: var(--RED, #FF2110); font-family: Manrope, sans-serif; font-size: 22px; font-weight: 600; margin-bottom: 45px; } .corpus-contact p:first-child { margin-bottom: 15px; } .corpus-contact p:nth-child(2) { margin-bottom: 25px; } |
.corpus { display: flex; margin-right: 165px; } .corpus-image img { margin-right: 20px; /* Отступ между фото и списком */ } .corpus-info { flex-grow: 1; /* Занимает всю оставшуюся ширину */ flex-direction: column; /* Элементы внутри располагаются в столбец */ justify-content: space-between; /* Распределение пространства между элементами */ max-width: 391px; } .corpus-name h2 { color: var(--BLACK, #040520); font-family: Manrope, sans-serif; font-size: 28px; font-style: normal; font-weight: 800; line-height: normal; margin-bottom: 25px; } .corpus-tag p { color: var(--RED, #FF2110); font-family: Manrope, sans-serif; font-size: 22px; font-weight: 600; margin-bottom: 45px; } .corpus-contact p:first-child { margin-bottom: 15px; } .corpus-contact p:nth-child(2) { margin-bottom: 25px; }
Дополнительно:
что именно должно быть в два ряда?
в объявление для .prez добавить flex-wrap: wrap;
- Спасибо
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для размещения блоков в два ряда на странице можно воспользоваться CSS свойством `float`. Это позволяет выравнивать элементы горизонтально, распределяя их по двум рядам.
Пример использования `float` для размещения блоков в два ряда:
.block { width: 200px; height: 200px; background-color: #f0f0f0; margin: 10px; float: left; } <div class="block">Block 1</div> <div class="block">Block 2</div> <div class="block">Block 3</div> <div class="block">Block 4</div>.block { width: 200px; height: 200px; background-color: #f0f0f0; margin: 10px; float: left; } <div class="block">Block 1</div> <div class="block">Block 2</div> <div class="block">Block 3</div> <div class="block">Block 4</div>
В данном примере у нас есть четыре блока с классом `block`, которые имеют ширину и высоту 200px, заданный цвет фона и отступы. Свойство `float: left;` указывает, что блоки должны выравниваться слева и попадать в два ряда.
Если вы хотите, чтобы блоки были выровнены по центру страницы, можно воспользоваться свойством `margin: 0 auto;` для центрирования блоков.
Надеюсь, это поможет вам разместить блоки в два ряда на вашей странице! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.