Ausrichten drei divs nebeneinander und entlang der Unterseite der längsten

Question

Ich weiß, ähnliche Fragen wurden gestellt, aber mein Szenario ist etwas anders. Ich habe drei divs, die in einer Reihe ausgerichtet sind. Ich möchte im Grunde, dass ihr gesamter Inhalt auf den Boden gedrückt wird. Ich habe versucht, Position: Relativ und Position: absolut, unten: 0, aber das hat nicht funktioniert.

Hier ist das CSS und einige Bilder. Ich habe Grenzen zu klären zu versuchen:

.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

Verwenden Anzeigewerte als Tabelle, table-row und table-Zelle, mit dem Sie die gleichen Höhen sowie die vertikale align auf den Boden schaffen .

Überprüfen Sie die Geige: 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; 
}