HTML/CSS Table Cell 在底部只对齐一个按钮；

Question

我的元素在表格单元格中的定位确实存在问题。我的表格单元格中确实有标题、图像和按钮。表格单元格的图像高度不同，所以我希望按钮位于底部。

我想要的是在下面: !Final Table-Cell Layout 1

目前按钮/链接文本就在图像之后...

.greyCompareTable {
    padding: 20px 0px 20px 0px;
    background-color: #f5f5f5;
    margin-left: -20px;
    margin-right: -20px;
    display: table;
    width: 100%;
    border-spacing: 20px;
    border-collapse: separate;
    table-layout: fixed;
}

.greyCompareRow {
    display:table-row;
    background-color:green;
}

.greyCompareCell {
    display:table-cell;
    background-color: #fff;
    border: 1px;
    border-style: solid;
    border-radius: 2px;
    border-color: #37b8eb;
    position: relative;
}

<div class="greyCompareTable">
<div class="greyCompareRow">
	<div class="greyCompareCell">
		<h3 style="text-align: center;">
			<span id="Kastein_Bosch_Bartoel">Headline</span>
		</h3>
		<p style="text-align: center;">
			<a href="..." target="_blank" rel="noopener"><img src="..." border="0" class="tie-appear"></a>
			<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
			<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
		</p>
		<p style="text-align: center;">
			<a href="..." target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
				<img class="aligncenter tie-appear" style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0">
		</p>
	</div>
	<div class="greyCompareCell">
		<h3 style="text-align: center;">
			<span id="Bergland_Bartoel">Headline 2</span>
		</h3>
			<p style="text-align: center;">
				<a href="..." target="_blank" rel="noopener">
				<img src="..." border="0" class="tie-appear"></a>
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
				This image is a little bit bigger
			</p>
			<p style="text-align: center;">
				<a href="" target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
			</p>
		</div>
		<div class="greyCompareCell">
			<h3 style="text-align: center;">
				<span id="Bergland_Bartoel">Headline 3</span>
			</h3>
			<p style="text-align: center;">
				<a href="..." target="_blank" rel="noopener">
				<img src="..." border="0" class="tie-appear"></a>
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
			</p>
			<p style="text-align: center;">
				<a href="" target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
			</p>
		</div>
</div>
</div>

Answer 1

您可以在按钮上设置 position: absolute; 和 bottom: 0; 但请记住将父元素设置为 position:relative为了使用绝对定位并为较小的图像添加 min-height: 300px; 到单元格。