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

将此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)。

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

1 个答案: