css 如何创建底部有按钮的等高定价表[关闭]

gcmastyq 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(108)

已关闭，此问题需要更focused，目前不接受回答。
**要改进此问题吗？**更新问题，使其仅关注editing this post的一个问题。

两年前关闭。
Improve this question
我已经在我的网站上设计了一些价格表，并让它们“水平”响应，但不是“垂直”。我的目标是使所有三个价格表的高度相等，并将“订阅”按钮粘在底部，这样每当内容添加到一个价格表的主体时，所有其他价格表将继承最长表的高度，直到某个断点。
有点像这个网站。他们有一个类似的想法，我一直试图实现到我自己的，使用flexbox和margin-top: auto;的页脚的定价表，所以按钮留在底部，但没有我尝试似乎是工作。我理解背后的概念，但我的实现是错误的。正如你可以看到在下面的截图，我的价格表的高度都是根据一个特定div的主体中有多少内容而变化的，它看起来很不整洁。（流行）定价表按比例增加了1.1。任何帮助都将不胜感激，因为我是CSS flexbox的新手。我也在Stack Overflow上搜索了类似的问题，虽然人们已经有了类似的问题的答案，但这些解决方案对我不起作用。

css

来源：https://stackoverflow.com/questions/64206818/how-to-create-equal-height-pricing-tables-with-buttons-at-the-bottom

2条答案

按热度按时间

0x6upsns1#

添加此CSS

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

赞(0）回复(0）举报 2023-04-13

9rygscc12#

.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”用于等高按钮。

赞(0）回复(0）举报 2023-04-13

我来回答

css 如何创建底部有按钮的等高定价表[关闭]

2条答案

相关问题

热门标签

最新问答