如何使用底部的按钮创建等高定价表[关闭]答案

【问题标题】：How to create equal height pricing tables with buttons at the bottom [closed]如何使用底部的按钮创建等高定价表[关闭]
【发布时间】：2020-10-05 19:33:55
【问题描述】：

我在my site 上设计了一些定价表，并让它们“水平”响应，而不是“垂直”响应。我的目标是使所有三个定价表的高度相等，并且将“订阅”按钮粘在底部，这样每当内容添加到一个定价表的正文时，所有其他定价表都将继承最长表的高度，直到某个断点。

有点像this site 拥有它。他们有一个类似的想法，我一直在尝试将其实现到我自己的想法中，使用 flexbox 和 margin-top: auto; 作为定价表的页脚，因此按钮保持在底部，但是我尝试过的任何方法似乎都不起作用。我理解它背后的概念，但我的实现是错误的。正如您在下面的屏幕截图中看到的那样，我的定价表的高度都根据一个特定 div 的正文中的内容量而有所不同，而且看起来很不整洁。中间（流行）定价表按比例放大 1.1。任何帮助将不胜感激，因为我是 CSS flexbox 的新手。我还在 Stack Overflow 上搜索过类似的问题，虽然人们已经回答了类似的问题，但这些解决方案对我不起作用。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

添加这个css

ul.cd-pricing-list{
  display: flex;
}
ul.cd-pricing-list  li ul{
  height:100%;
}
ul.cd-pricing-list  li ul li{
  height:100%;
}

【讨论】：

这对我解决等高问题很有帮助！但是，按钮仍然不会粘在底部。

【解决方案2】：

.PriceTableAll{
display: flex;

}
.pricetable {
display: flex;
flex-direction: column;
width: 200px;
margin: 0 20px;
border: 1px solid #000;
text-align: center;
}
.pricetable a {
margin-top: auto;
}

<div class="PriceTableAll">
<div class="pricetable">
<h2>Standard</h2>
<p>lorem</p>
<p>Lorem</p>
<a href"#">Button</a>
</div>
<div class="pricetable">
<h2>Standard</h2>
<p>lorem</p>
<p>Lorem</p>
<p>lorem</p>
<p>Lorem</p>
<p>lorem</p>
<p>Lorem</p>
<a href"#">Button</a>
</div>

</div>

我使用“margin-top：auto”作为等高按钮。

【讨论】：