は、私は次のHTML構造を持っている製品のリストを持っている親

Question

の底にいくつかのHTML要素を揃える：

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

隣同士にこれらの親の多くがあります。最初は、（タイトルの長さの違いにより）異なる高さになることが多いという問題がありました。私はdisplay: flex;を使ってそれを修正しました。だから今は同じ高さです。しかし、parentの下部に貼り付けるにはbuttons divが必要ですが、タイトルと画像はそのまま残ります。だから私はボタンの下に白いスペースを持っているのではなく、ボタンと前の子どもの間に白いスペースを持つことを好むでしょう（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つのボタンがあり、2番目のボタンには1つのみがありますが、これは意図されたものです。ボタンの数が異なる製品もあります。

#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

私は、これは問題がある場合はわからないが、私はあなたが高さとを追加する必要があると思うの幅