使用CSSFlexbox创建等高定价表-创新互联
在我看来，定价表是最简洁有效的方式，可以快速捕捉并向潜在客户传达您的服务和优势一目了然。最近我正在为我的网站查看一个很好的定价表，并且几乎所有这些都意识到了问题 - 他们没有垂直响应。我的意思是，定价表中的每一列都有自己的高度，基于内部的内容量。我需要一个相等高度的定价表，其中所有列共享相同的高度而不依赖于表。
这是一个相等高度定价表的示例，我将向您展示如何使用CSS Flexbox进行创建。注意每列的高度与其对等点的高度相同，即使它们都有不同的内容行。此外，嵌入了号召性用语按钮的最后一个LI始终是底部对齐的：
简而言之，以下是创建等高定价表的两个关键CSS规则：
HTML标记
让我从HTML标记开始，我希望尽可能保持干净和精益。为此，我只为每个单独的定价表使用UL列表，所有这些都包含在DIV容器中：
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
如您所见，每个UL.theplan元素包含不同数量的LI条目。目标是使每个UL具有相同的高度，并且每个定价计划的最后一个LI条目在最底部排列。
我发现这是最简单的方法吗？使用CSS flexbox并将每个UL设置为 flex-direction:column使它们垂直扩展以匹配最长的flex儿童的高度。我将在下面详细解释。
CSS
这是等高定价表的CSS。我已经删除了不重要的位，因此您可以专注于重要的事情：
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
|
我首先将父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在这些元素中：
1 2 3 4 |
|
结论
正如您所看到的，CSS Flexbox使创建高度相同，响应迅速，甚至在页面中心的元素变得轻而易举。它帮助我解决了我所见过的许多CSS定价表中的大多数问题。我希望你能找到我有所帮助的技巧。
另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享名称：使用CSSFlexbox创建等高定价表-创新互联
URL分享：http://mswzjz.cn/article/iijod.html