HTML标记
让我从HTML标记开始，我希望尽可能保持干净和精益。 为此，我只为每个单独的定价表使用UL列表，所有这些都包含在DIV容器中：
如您所见，每个
UL.theplan
元素包含不同数量的LI条目。
目标是使每个UL具有相同的高度，并且每个定价计划的最后一个LI条目在最底部排列。
我发现这是最简单的方法吗？
使用CSS flexbox并设置每个UL，
flex-direction:column
使它们垂直扩展以匹配最长的flex儿童的高度。
我将在下面详细解释。
CSS
这是等高定价表的CSS。 我已经删除了不重要的位，因此您可以专注于重要的事情：
我首先将父DIV容器设置为
display:flex
，并允许flex子项包装并使用
flex-wrap: wrap
和
水平居中
justify-content: center
。
所有儿童UL元素都被认为是儿童。
对于每个由UL元素组成的定价表，我都设置了
flex-direction:column
。
默认情况下，flex子项在水平轴上播放。
通过设置
direction:column
，我强制Flex子项的所有默认行为发生在垂直平面上，包括
默认情况下的
金奖
等于高度flex儿童
。
底部对齐每个UL定价表中的最后一个LI
因此，DIV中的所有单独定价表现在都是相同的高度，但是仍然需要一个重要的改进来使一切看起来都很精致。 我希望调用操作按钮（包含在每个UL的最后一个LI中）与表格的最底部对齐。
要做到这一点涉及两个步骤。
首先，我将每个UL定价表设置为一个flexbox容器本身（
display: flex
）。
完成后，我可以使用该
margin
属性将特定子元素与其对等元素对齐，例如左对齐或右对齐以用于水平弹性子元素，或者在此情况下为垂直弹性子元素，顶部或底部。
为了使最后一个LI元素在底部对齐，要添加的神奇成分
margin-top: auto
在这些元素中：
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69933200/viewspace-2651374/ ，如需转载，请注明出处，否则将追究法律责任。
