css - 如何将表格单元格始终设置在显示 :table? 的底部

Question

我尝试将表格单元格始终放在 display:table 的底部，
但没有成功。

也许有人可以告诉我我的 CSS 有什么问题。

codepen

HTML

<div class="table">
  <div class="cell">
    <div class="top">Top</div>
    <div class="middle">Text in the<br>middle cell<br>with a variable <br>number of rows</div>  
    <div class="bottom">Button always at the bottom</div>
  </div>
  <div class="cell">
    <div class="top">Top</div>
    <div class="middle">Middle</div>
    <div class="bottom">Button always at the bottom</div>
  </div>
</div>

CSS

.table {
  background-color:#BBB;
  border-collapse:separate;
  border-spacing:10px;
  display:table;
  width:500px;
}
.cell {
  background-color:#EEE;
  display:table-cell;
  padding:5px;
  width:200px;
}
.top {
  height:20px; 
}
.middle {
  min-height:60px;
  padding:15px;
}
.bottom {
  min-height:30px;
  vertical-align:bottom;
}

Answer 1

如果你能负担得起给你的 .bottom 一个固定的高度，你可能绝对可以将它们定位在容器内，然后给 .middle 一些匹配的 margin 还是 padding？