具有绝对定位元素的等高列

Question

我有一个包含一些内容和一个按钮的无序列表。列（LI）并不总是相同的高度，但我希望按钮始终位于底部。我正在使用 display: table / display: table-cell 技巧来保持 LI 的高度相同，但是我无法让按钮正确对齐。我想要底部的按钮，但我也希望它的行为像内容一样。这意味着我希望它居中并在调整浏览器大小时更改它的宽度。

这是一个演示问题的小提琴。

http://jsfiddle.net/mattymess/BBuqY/

这是一段代码，展示了我是如何做到等高的......

.rewards .rewards-chooser {
  margin: 0;
  border-top: 2px solid #f4f4f4;
  border-bottom: 2px solid #f4f4f4;
  display: table;
  width: 100%;
  position: relative;
}
.rewards .reward {
  width: 25%;
  border-left: 2px solid #f4f4f4;
  list-style: none;
  display: table-cell;
}

Answer 1

在.rewards .reward .redeem 类中将position: absolute; 更改为position: relative;，如下所示：

.rewards .reward .redeem {
    position: relative;
    bottom: 0;
    box-sizing: border-box;
}

仅供参考：您的按钮是相对于某物（您的容器）而言的，而不是绝对的。

要将按钮设置在同一行，您应该为容器范围定义一个高度。像这样的：

.reward-description {
    height: 200px;
}

我为你做了一个干净的例子。要查看，click here (jsFiddle)。