@crack_user

Как разместить блоки в два ряда?

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

<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;
}
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
IvanU7n
@IvanU7n
в объявление для .prez добавить flex-wrap: wrap;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы