使用CSS Flexbox创建等高定价表

发布时间：2020-05-27 00:42:37 作者：二哈少爷
来源：网络阅读：481

在我看来，定价表是最简洁有效的方式，可以快速捕捉并向潜在客户传达您的服务和优势一目了然。最近我正在为我的网站查看一个很好的定价表，并且几乎所有这些都意识到了问题 - 他们没有垂直响应。我的意思是，定价表中的每一列都有自己的高度，基于内部的内容量。我需要一个相等高度的定价表，其中所有列共享相同的高度而不依赖于表。

这是一个相等高度定价表的示例，我将向您展示如何使用CSS Flexbox进行创建。注意每列的高度与其对等点的高度相同，即使它们都有不同的内容行。此外，嵌入了号召性用语按钮的最后一个LI始终是底部对齐的：

简而言之，以下是创建等高定价表的两个关键CSS规则：

HTML标记

让我从HTML标记开始，我希望尽可能保持干净和精益。为此，我只为每个单独的定价表使用UL列表，所有这些都包含在DIV容器中：

五

<div class =“pricingdiv”>

<ul class =“theplan”>

<li class =“title”> 第二名 Herman Miler </ li>

<li> 体重： 55磅</ li>

<li> 最大重量： 330磅</ li>

<li> <a class="pricebutton" href="#"> 结帐</a> </ li>

</ UL>

<ul class =“theplan”>

<li class =“title”> 第一名 Argomax主席</ li>

<li> 材料：尼龙带透气玻璃纤维</ li>

<li> 头枕：是</ li>

“

</ UL>

<ul class =“theplan”>

<li class =“title”> 第三名 Eurotech Mesh </ li>

<li class =“ethighlight”> 尺寸： 24.8W x 47.3H </ li>

“

<li> <a class="pricebutton" href=""> 结帐</a> </ li>

</ UL>

</ DIV>

如您所见，每个UL.theplan元素包含不同数量的LI条目。目标是使每个UL具有相同的高度，并且每个定价计划的最后一个LI条目在最底部排列。

我发现这是最简单的方法吗？使用CSS flexbox并将每个UL设置为 flex-direction:column使它们垂直扩展以匹配最长的flex儿童的高度。我将在下面详细解释。

CSS

这是等高定价表的CSS。我已经删除了不重要的位，因此您可以专注于重要的事情：

五

三十

.pricingdiv {

显示：flex;

flex-wrap：wrap;

辩解内容：中心;

}

.pricingdiv ul.theplan {

list-style：none;

保证金：0;

填充：0;

显示：flex;

弯曲方向：柱;

宽度：260px; / *每张桌子的宽度* /

保证金权利：20px; / *表之间的间距* /

margin-bottom：1em;

边框：1px实心灰色;

过渡：全部.5s;

}

.pricingdiv ul.theplan：hover {/ *当鼠标悬停在定价表上时* /

变换：规模（1.05）;

过渡：全部.5s;

z-index：100;

box-shadow：0 0 10px灰色;

}

.pricingdiv ul.theplan：last-of-type {/ *删除最后一个表中的右边距* /

margin-right：0;

}

/ *每个定价中的最后一个LI * *

.pricingdiv ul.theplan li：last-of-type {

text-align：center;

margin-top：auto; / *将最后一个LI（价格botton li）对齐到UL *的最底部

} 

@media only screen and（max-width：600px）{

.pricingdiv ul.theplan {

border-radius：0;

宽度：100％;

margin-right：0;

}

.pricingdiv ul.theplan：hover {

变换：无;

box-shadow：none;

}

.pricingdiv a.pricebutton {

显示：块;

}

}

我首先将父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在这些元素中：

.pricingdiv ul.theplan li：last-of-type {

text-align：center;

}

结论

正如您所看到的，CSS Flexbox使创建高度相同，响应迅速，甚至在页面中心的元素变得轻而易举。它帮助我解决了我所见过的许多CSS定价表中的大多数问题。我希望你能找到我有所帮助的技巧。

使用CSS Flexbox创建等高定价表

HTML标记

CSS

底部对齐每个UL定价表中的最后一个LI

结论

相关阅读