Как элегантно сделать блоки одинакового размера при этом чтобы элементы блоков были друг на против друга?

Question

[Bjorund]

Всем привет! Подскажите есть ли способ правильно оформить блоки, чтобы при этом элементы каждого блока (картинки, текст, кнопки) находились друг напротив друга (в горизонтальной линии) не зависимо от объема контента выше.

В приложенном скриншоте видно как болтается последний элемент "read more".

Через last child ничего не получилось. А решение через grid, как мне показалось, нарушает связанность элементов с блоком.

<div class="products__info">
    <div class="products__item">
        <img src="img/card1.svg" class="products__img" alt="">     
        <h3 class="products__info__title">
            Our Product
        </h3>
        <p class="products__text">
            Our product is made on the base of our team’s careful 
            research and analyses, ranging from internet based application.
        </p>
        <a href="" class="products__btn">Read More</a> 
    </div>

    <div class="products__item">
        <img src="img/card2.svg" class="products__img" alt="">
        <h3 class="products__info__title">
            Our Service
        </h3>
        <p class="products__text">
            DSI’s shared service solutions focus on the front-end 
            based software development, designed specifically for the 
            banking and financial sectors.
        </p>
        <a href="" class="products__btn">Read More</a> 
    </div>
    
     <div class="products__item">
        <img src="img/card3.svg" class="products__img" alt="">
        <h3 class="products__info__title">
            Our Technology
        </h3>
        <p class="products__text">
            First JAVA, runs on more than 850 million personal computers worldwide, 
            and on billions of devices worldwide, including mobile and TV devices.
        </p>
        <a href="" class="products__btn">Read More</a> 
    </div>
</div>

.products__info{
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
    gap: 20px;
}


.products__info__title {
    margin-top: 17px;
    font-weight: 500;
    font-size: 28px;
    line-height: 133.69%;
    color: #EE4248;
}

.products__text {
    margin-top: 15px;
    margin-bottom: 24px;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #30444E;
}

.products__btn {
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #EE4248;
    padding: 8px 16px;
    border-radius: 5px; 
}

Благодарю за ответы!

Answer 1

[Ankhena]

Флекс колонками для products__item
margin-top auto для .products__btn

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

Comments

[Евгений Залецкий]

Ему можно и через инлайн-блок сделать

[Ankhena]

Евгений Залецкий, кого простите через инлайн блок сделать? Кнопки на одном уровне расположить инлайн-блоками? Покажите, пожалуйста?

[Ankhena]

Bjorund ау?

[Bjorund]

Привет, прошу прощение за долгий ответ. Ваше решение помогло!

Answer 2

[Евгений Залецкий]

Если на чистом HTML + CSS
То сделать блоки инлайн- блок.
display: inline-block;

И потом можете выровнять как вам надо.

Причём здесь flexbox, я не понимаю, так как у вас этого вообще нет.

Answer 3

[roaddd]

.products__item {
 display: flex;
 flex-direction: column;
}

.products__text {
 flex-grow: 0;
}

.products__btn {
 flex-grow: 1;
}

Comments

[Ankhena]

Так кнопки будут разной высоты, а не на одном уровне.

Answer 4

[ytsn]

products__item:
width: 30%;
position: relative;
добавить padding-bottom
возможно z-index: 0 или 1

products__btn:
position: absolute; bottom: 0;

Возможно, если длина заголовка на 1-2 строки
products__info__title:
задать height на две-три строки