我在表格单元中元素的位置确实存在问题。 我的表格单元格中确实有标题，图像和按钮。表格单元格的图像高度不同，因此我确实希望按钮位于底部。
我想要的是在下面： !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>
答案 0 :(得分：0)
您可以在按钮上设置position: absolute;和bottom: 0;，但要记住将父元素设置为position:relative，以便使用绝对定位并将min-height: 300px;添加到单元格中以获得较小的图像。
答案 1 :(得分：0)
以下是将超级链接底部和中央对齐的完整代码。 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>