我有一个无序列表,其中包含一些内容和一个按钮。列 (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;
}
最佳答案
在 .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) .
关于html - 具有绝对定位元素的等高列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17454677/