3つのdivを並べて、最長の底に沿って並べる

Question

私は同様の質問がされていることを知っていますが、私のシナリオは少し異なります。私は3つのdivを持っており、それらは一列に並んでいます。私は基本的にすべてのコンテンツが底に押し込まれることを願っています。私はposition：relativeとposition：absolute、bottom：0を使ってみましたが、うまくいきませんでした。

ここにはCSSといくつかの画像があります。私は明確にしようとする国境を置く：

.topAlbums { 
    border: 2px solid black; 
    overflow: hidden; 
} 
.album0 { 
    width: 33%; 
    padding-right: 20px; 
    float: left; 
    border: 2px solid blue; 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
} 
.album1 { 
    width: 33%; 
    padding-right: 20px; 
    float: left; 
    border: 2px solid blue; 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
} 
.album2 { 
    width: 33%; 
    padding-right: 20px; 
    float: left; 
    border: 2px solid blue; 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
} 

Answer 1

あなたが一番下に同じ高さだけでなく、垂直方向の整列を作成することが可能なテーブル、テーブル行とテーブルセルなど

用表示値。

フィドルを確認してください： https://jsfiddle.net/oyzorx4r/

<div class="table"> 
    <div class="row"> 
    <div class="cell"> 
     info in it at the bottom 
    </div> 
    <div class="cell"> 
     some more info<br /><Br /> with extra breaks 
    </div> 
    <div class="cell"> 
     <p> 
     lots of info<br /><br /><Br /><Br /><br />and some more 
     </p> 
    </div> 
    </div> 
</div> 


.table { 
    display:table; 
    width:100%; 
    overflow:hidden; 
} 
.row { 
    display:table-row; 
} 
.cell { 
    display:table-cell; 
    width:33%; 
    background:red; 
    vertical-align:bottom; 
}