HTML/CSS 表格单元在底部仅对齐一个按钮；

Question

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

我想要的是在下面： !Final Table-Cell Layout1

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

.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; 以获得较小的图像。

Answer 2

这里是在底部和中心对齐超链接的完整代码。 position: absolute 会将其移出它的位置，bottom: 0; 会将元素拉到底部，但这还不够，因为其他元素的定位不正确。添加width: 100%; + margin:0 auto; 将水平对齐链接。

最后你会得到：

.shortc-button {
  bottom: 0;
  left: 0;
  width: 100%;
  margin:0 auto ;
  position: absolute;
}

.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;
}
.shortc-button {
  bottom: 0;
  left: 0;
  width: 100%;
  margin:0 auto ;
  position: absolute;
}

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