将三个div并排放置并沿着最长的底部对齐

Question

我知道有类似的问题，但我的情况略有不同。我有三个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;
}