Html 具有绝对定位图元的等高柱

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

这里有一把小提琴来说明这个问题

这是一段代码，显示了我是如何实现等高的

.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;
}

---

改变

位置：绝对至<代码>位置：相对在
.rewards.reward.retain中，像这样兑换
课程：

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

.reward-description {
    height: 200px;
}

仅仅是知识：你的按钮是相对于某物（你的容器）的，而不是绝对的

要在同一行中设置按钮，您应该定义容器范围的高度。大概是这样的：

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

.reward-description {
    height: 200px;
}

我为你树立了一个明确的榜样。要知道，.
不会改变
magin left:-25%至
左边距：-50%用于
。奖励。奖励。兑换
是否为您执行此操作？除非我误解了……这个解决方案的问题是，由于内容不同，每个块的高度可能并不总是相同的。我不想在只有两行拷贝的情况下强制块达到400px的高度。基本上，我希望所有的块都和最高的块一样高，这将由它的内容量来定义。这就是为什么我要使用
display:table cell