對準一些HTML元素到其父

Question

的底部我有具有以下HTML結構的產品列表：

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

有許多家長彼此相鄰。首先，我有一個問題，他們往往會是不同的高度（由於標題的長度不同）。我使用display: flex;修正了這個問題，所以現在他們都是一樣的高度。不過，我需要buttons div堅持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; } 

但我不知道這是否是最佳的解決方案，因爲按鈕的高度可能會改變或甚至是動態的。有更好的解決方案嗎？

編輯：

下面是一個演示問題的代碼片段。第一個父母有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

我不知道這是否是問題，但我認爲你需要添加一個高度和寬度