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

Question

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

这是一个演示问题的 fiddle 。

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) .