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

我有一个包含一些内容和一个按钮的无序列表。列（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;
}

最佳答案

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

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

只是了解一下：您的按钮是相对于某物（您的容器）的，而不是绝对的。

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

.reward-description {
    height: 200px;
}

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