БЛОГ НА HUSL


Как сделать одинаковый отступ, при разном содержимом в колонках?

Автор вопроса: Morkovka

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

Я не совсем понимаю как сделать пространство после текста одинаковым. Из-за разного объема текста, текст снизу и очеркивающая линия находятся на разной высоте. Как мне сделать так, что бы после основного текста, у меня нижний текст и линия находились на одной высоте(оси)

.price {
    display: flex;
        flex-direction: column;
        align-items: center;
}

.price__title {

    text-transform: uppercase;
    text-align: center;
        font-weight: bold;
        font-size: 28px;
        margin: 10px 0 20px;
            margin-top: 50px;
}

.price__row {

        display: flex;
        justify-content: center;
        gap: 100px;

}

.price__block {
    flex: 1 1 calc(100% / 3);
        /* Это разделит контейнер на три равные части */
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        /* Убедитесь, что padding учитывается в ширине и высоте */
        margin: 0 10px;
        /* Отступы между колонками */
        border: 1px solid #ddd;
        /* Опционально: для визуального разделения колонок */
        height: auto;
    max-width: 90%;
    }

.price__name {
    text-align: center;
        font-weight: bold;
        font-size: 28px;
        margin: 10px 0 20px;
}

.price__list {
flex-grow: 1;
}

.price__list p{
    padding: 10px;
    
}

.price__description{
    
    display: flex;
    justify-content: space-between;
    text-align: left;
        
}


.price__price {
    float: right;
    margin-left: 20px;
    font-weight: bold;
}

.price__notion p {
    text-align: left;

}

.price__line{
    background-color: aliceblue;
    height: 1px;
    width: 100%;
    margin-bottom: 100px;
}

.price__remark {
    
    
}

.price__button {
    background: transparent;
    color: aliceblue;
    padding: 10px;
    border: 1px solid white;
    width: 50%;
    border-radius: 20px;
}
        <div class="price">
            <h3 class="price__title">Цены</h3>
            <div class="price__row">
                <div class="price__block">
                    <h3 class="price__name">Входной билет</h3>
                    <div class="price__list">
                        <p class="price__price">300р</p>
                        <p class="price__description">Дети(от 4 до 7 лет)</p>
                        <p class="price__price">800р</p>
                        <p class="price__description">Взрослые</p>
                        <p class="price__price">450р</p>
                        <p class="price__description">Школьники</p>
                        <p class="price__price">800р</p>
                        <p class="price__description">Студенты</p>
                        <p class="price__price">400р</p>
                        <p class="price__description">Пенсионеры</p>
                        <div class="price__line"></div>
                        <p class="price__notion">Бесплатно: </p>
                        <p class="price__remark"> Дети до 3-х лет
                            Контактные зоны
                        </p>
                        <button class="price__button">Купить билет</button>

                    </div>

                </div>
                <div class="price__block">
                    <h3 class="price__name">Экскурсии</h3>
                    <div class="price__list">
                        <p class="price__price">300р/чел</p>
                        <p class="price__description">Групповые (3-7 человек) </p>
                        <p class="price__price">500р/чел</p>
                        <p class="price__description">Индивидуальные(1-2 человека)</p>
                        <p class="price__price">100р/чел</p>
                        <p class="price__description">Детские</p>
                        <div class="price__line"></div>
                        <p class="price__notion">Дополнительно:</p>
                        <p class="price__remark"> Необходимо приобрести входной билет</p>

                        <button class="price__button">Записаться</button>
                    </div>

                </div>
                <div class="price__block">
                    <h3 class="price__name">Аудиогид</h3>
                    <div class="price__list">
                        <p class="price__price">200р</p>
                        <p class="price__description">Программа (1 час) </p>
                        <p class="price__price">100р</p>
                        <p class="price__description">Программа (30 мин)</p>
                        <p class="price__price">150р</p>
                        <p class="price__description">Детская программа</p>
                        <p class="price__price">300р</p>
                        <p class="price__description">Аудиоэнциклопедия</p>
                        <div class="price__line"></div>
                        <p class="price__notion">Дополнительно:</p>
                        <p class="price__remark">Необходимо приобрести входной билет</p>

                        <button class="price__button">Купить</button>
                    </div>

                </div>
            </div>
        </div>


Источник

Ответы (2 шт):

Автор решения: Dennis

Создай пространство между верним и нижним элементом и примени justify-content: space-between

→ Ссылка
Автор решения: Евгений Ли

Примерно так. Что бы полосы были равны не получится, поэтому я сделал полосу от нижнего блока bottom, но его бы тоже стоило привести к определённой высоте, что бы полосы всегда были в уровень. А также пришлось .price-list задать - justify-content: space-between при этом верхнюю часть и нижнюю обернуть в .top и .bottom элементы.
Также обернул таблицу цен в list-row, что бы сделать табличный ровный вывод.

.price {
    display: flex;
        flex-direction: column;
        align-items: center;
}

.price__title {

    text-transform: uppercase;
    text-align: center;
        font-weight: bold;
        font-size: 28px;
        margin: 10px 0 20px;
            margin-top: 50px;
}

.price__row {

        display: flex;
        justify-content: center;
        gap: 20px;

}

.price__block {
    flex: 1 1 calc(100% / 3);
        /* Это разделит контейнер на три равные части */
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid #ddd;
    }

.price__name {
    text-align: center;
        font-weight: bold;
        font-size: 28px;
        margin: 10px 0 20px;
}

.price__list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.list-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}

.price__price {
  white-space: nowrap;
}

.bottom {
  border-top: 1px solid black;
  margin-top: 0;
  padding-top: 40px;
}

.price__button {
    background: green;
    color: aliceblue;
    padding: 10px 20px;
    border: 1px solid white;
    width: auto;
    border-radius: 20px;
}
<div class="price">
            <h3 class="price__title">Цены</h3>
            <div class="price__row">
                <div class="price__block">
                    <h3 class="price__name">Входной билет</h3>
                    <div class="price__list">
                    <div class="top">
                    <div class="list-row">
                        <p class="price__description">Дети(от 4 до 7 лет)</p>
                        <p class="price__price">300р</p>
                        </div>
                        <div class="list-row">
                        <p class="price__description">Взрослые</p>
                        <p class="price__price">800р</p>
                        </div>
                        <div class="list-row">
                        <p class="price__description">Школьники</p>
                        <p class="price__price">450р</p>
                        </div>
                        <div class="list-row">
                        <p class="price__description">Студенты</p>
                        <p class="price__price">800р</p>
                        </div>
                        <div class="list-row">
                        <p class="price__description">Пенсионеры</p>
                        <p class="price__price">400р</p>
                        </div>
                     </div>
                     <div class="bottom">
                        <p class="price__notion">Бесплатно: </p>
                        <p class="price__remark"> Дети до 3-х лет<br>Контактные зоны</p>
                        <button class="price__button">Купить билет</button>
                     </div>

                    </div>

                </div>
                <div class="price__block">
                    <h3 class="price__name">Экскурсии</h3>
                    <div class="price__list">
                    <div class="top">
                        <div class="list-row">
                        <p class="price__description">Групповые (3-7 человек) </p>
                        <p class="price__price">300р/чел</p>
                        </div>
                        <div class="list-row">
                        <p class="price__description">Индивидуальные(1-2 человека)</p>
                        <p class="price__price">500р/чел</p>
                        </div>
                        <div class="list-row">
                        <p class="price__description">Детские</p>
                        <p class="price__price">100р/чел</p>
                        </div>
                        </div>
                        <div class="bottom">
                        <p class="price__notion">Дополнительно:</p>
                        <p class="price__remark"> Необходимо приобрести входной билет</p>
                        <button class="price__button">Записаться</button>
                        </div>
                    </div>

                </div>
                <div class="price__block">
                    <h3 class="price__name">Аудиогид</h3>
                    <div class="price__list">
                    <div class="top">
                        <div class="list-row">
                        <p class="price__description">Программа (1 час) </p>
                        <p class="price__price">200р</p>
                        </div>
                        <div class="list-row">
                        <p class="price__description">Программа (30 мин)</p>
                        <p class="price__price">100р</p>
                        </div>
                        <div class="list-row">
                        <p class="price__description">Детская программа</p>
                        <p class="price__price">150р</p>
                        </div>
                        <div class="list-row">
                        <p class="price__description">Аудиоэнциклопедия</p>
                        <p class="price__price">300р</p>
                        </div>
                        </div>
                        <div class="bottom">
                        <p class="price__notion">Дополнительно:</p>
                        <p class="price__remark">Необходимо приобрести входной билет</p>
                        <button class="price__button">Купить</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.