Совместите некоторые HTML-элементы в нижней части своего родителя

Question

У меня есть список продуктов, которые имеют следующий HTML структуру:

<div class="parent"> 
    <img src="myimg.jpg" /> 
    <div class="title">My Title</div> 
    <div class="buttons"></div> 
</div> 

Есть многие из этих родителей рядом друг с другом. Сначала у меня был вопрос, что они часто бывают разной высоты (из-за разницы в длинах названий). Я исправил это с помощью display: flex;, так что теперь они имеют одинаковые высоты. Однако мне нужно, чтобы div buttons придерживался нижней части parent, в то время как заголовок и изображение должны оставаться там, где они есть. Поэтому я предпочел бы иметь пустое пространство между кнопками и предыдущими дочерними элементами parent, а не иметь свободное пространство внизу, под кнопками.

Я пытался найти решение для этого, но все результаты приводят к этому CSS:

.parent { position: relative; } 
.buttons { position: absolute; bottom: 0; } 

Это решение не работает для меня, потому что тогда кнопки может перекрывать название. Так что лучшее решение, которое я мог думать так далеко, чтобы использовать нижние отступы, равные кнопки Высоты:

.parent { display: flex; position: relative; padding-bottom: 100px; } 
.buttons { position: absolute; bottom: 0; height: 100px; } 

Но я не уверен, что это лучшее решение, потому что кнопки высота может изменить или даже быть динамичным. Есть ли лучшее решение?

EDIT:

Вот отрывок, чтобы продемонстрировать эту проблему. Первый родитель имеет 2 кнопки, а второй - только один, это предназначено - некоторые продукты могут иметь разное количество кнопок, что является одной из причин, по которым я не могу использовать решение с padding-bottom.

#wrap { display: flex; } 
 
.parent { display: inline-block; position: relative; padding-bottom: 100px; width: 100px; border: 1px solid black; padding: 10px 20px 20px; margin: 0 5px 10px; } 
 
.buttons { position: absolute; bottom: 0; height: 100px; } 
 
.button-one { background: green; } 
 
.button-two { background: red; } 
 
.button-one, .button-two { margin: 15px 0 0; }

<div id="wrap"> 
 
    <div class="parent"> 
 
    <img src="myimg.jpg" /> 
 
    <div class="title">My Title</div> 
 
    <div class="buttons"> 
 
     <div class="button-one">Button one</div> 
 
     <div class="button-two">Button two</div> 
 
    </div> 
 
    </div> 
 
    <div class="parent"> 
 
    <img src="myimg.jpg" /> 
 
    <div class="title">My TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy Title</div> 
 
    <div class="buttons"> 
 
     <div class="button-one">Button one</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Самый простой способ сделать это добавить отступ-дно в свой "титул". Или, если вы можете изменить структуру HTML, которая является лучшим вариантом.

Попробуйте этот макет в HTML.

Answer 2

Попробуйте добавить clear: both; и float: left;, чтобы отправить его в самое нижнее положение его родителя.

Как это:

.buttons { position: absolute; bottom: 0; height: 100px; clear: both; float: left; width: 100px; } 

Answer 3

Я не уверен, если это проблема, но я думаю, что вам нужно добавить высоту и ширину