189 8069 5689

使用CSSFlexbox创建等高定价表

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

创新互联建站主要从事成都网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务安定,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

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

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

使用CSS Flexbox创建等高定价表

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

"vertical-align: inherit;">"vertical-align: inherit;">

"vertical-align: inherit;">"vertical-align: inherit;">

    

    "vertical-align: inherit;">"vertical-align: inherit;">

            

  • 第二名
    Herman Miler     "vertical-align: inherit;">"vertical-align: inherit;">

            

  • 体重： 55磅"vertical-align: inherit;">"vertical-align: inherit;">

            

  • 最大重量： 330磅"vertical-align: inherit;">"vertical-align: inherit;">

            

  • "pricebutton" href="#"> 结帐 "vertical-align: inherit;">"vertical-align: inherit;">

        "vertical-align: inherit;">"vertical-align: inherit;">

        

      "vertical-align: inherit;">"vertical-align: inherit;">

              

    • 第一名
      Argomax主席      "vertical-align: inherit;">"vertical-align: inherit;">

              

    • 材料：尼龙带透气玻璃纤维"vertical-align: inherit;">"vertical-align: inherit;">

              

    • 头枕：是"vertical-align: inherit;">"vertical-align: inherit;">

              “"vertical-align: inherit;">"vertical-align: inherit;">

              “"vertical-align: inherit;">"vertical-align: inherit;">

              

    • "pricebutton" href="#"> 结帐 "vertical-align: inherit;">"vertical-align: inherit;">

          "vertical-align: inherit;">"vertical-align: inherit;">

          

        "vertical-align: inherit;">"vertical-align: inherit;">

                

      • 第三名
        Eurotech Mesh         "vertical-align: inherit;">"vertical-align: inherit;">

                

      • 尺寸： 24.8W x 47.3H "vertical-align: inherit;">"vertical-align: inherit;">

                “"vertical-align: inherit;">"vertical-align: inherit;">

                

      • "pricebutton" href=""> 结帐 "vertical-align: inherit;">"vertical-align: inherit;">

            "vertical-align: inherit;">"vertical-align: inherit;">

如您所见，每个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

"vertical-align: inherit;">"vertical-align: inherit;">.pricingdiv {"vertical-align: inherit;">"vertical-align: inherit;">

    显示：flex;"vertical-align: inherit;">"vertical-align: inherit;">

    flex-wrap：wrap;"vertical-align: inherit;">"vertical-align: inherit;">

    辩解内容：中心;"vertical-align: inherit;">"vertical-align: inherit;">

}

"vertical-align: inherit;">"vertical-align: inherit;">

.pricingdiv ul.theplan {"vertical-align: inherit;">"vertical-align: inherit;">

    list-style：none;"vertical-align: inherit;">"vertical-align: inherit;">

    保证金：0;"vertical-align: inherit;">"vertical-align: inherit;">

    填充：0;"vertical-align: inherit;">"vertical-align: inherit;">

    显示：flex;"vertical-align: inherit;">"vertical-align: inherit;">

    弯曲方向：柱;"vertical-align: inherit;">"vertical-align: inherit;">

    宽度：260px; "vertical-align: inherit;">/ *每张桌子的宽度* /"vertical-align: inherit;">"vertical-align: inherit;">

    保证金权利：20px; "vertical-align: inherit;">/ *表之间的间距* /"vertical-align: inherit;">"vertical-align: inherit;">

    margin-bottom：1em;"vertical-align: inherit;">"vertical-align: inherit;">

    边框：1px实心灰色;"vertical-align: inherit;">"vertical-align: inherit;">

    过渡：全部.5s;"vertical-align: inherit;">"vertical-align: inherit;">

}

"vertical-align: inherit;">"vertical-align: inherit;">

.pricingdiv ul.theplan：hover {/ *当鼠标悬停在定价表上时* /"vertical-align: inherit;">"vertical-align: inherit;">

    变换：规模（1.05）;"vertical-align: inherit;">"vertical-align: inherit;">

    过渡：全部.5s;"vertical-align: inherit;">"vertical-align: inherit;">

    z-index：100;"vertical-align: inherit;">"vertical-align: inherit;">

    box-shadow：0 0 10px灰色;"vertical-align: inherit;">"vertical-align: inherit;">

}

"vertical-align: inherit;">"vertical-align: inherit;">

.pricingdiv ul.theplan：last-of-type {/ *删除最后一个表中的右边距* /"vertical-align: inherit;">"vertical-align: inherit;">

    margin-right：0;"vertical-align: inherit;">"vertical-align: inherit;">

}

"vertical-align: inherit;">"vertical-align: inherit;">

/ *每个定价中的最后一个LI * *"vertical-align: inherit;">"vertical-align: inherit;">

.pricingdiv ul.theplan li：last-of-type {"vertical-align: inherit;">"vertical-align: inherit;">

    text-align：center;"vertical-align: inherit;">"vertical-align: inherit;">

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

} 

"vertical-align: inherit;">"vertical-align: inherit;">

@media only screen and（max-width：600px）{"vertical-align: inherit;">"vertical-align: inherit;">

    .pricingdiv ul.theplan {"vertical-align: inherit;">"vertical-align: inherit;">

        border-radius：0;"vertical-align: inherit;">"vertical-align: inherit;">

        宽度：100％;"vertical-align: inherit;">"vertical-align: inherit;">

        margin-right：0;"vertical-align: inherit;">"vertical-align: inherit;">

    }

"vertical-align: inherit;">"vertical-align: inherit;">

    .pricingdiv ul.theplan：hover {"vertical-align: inherit;">"vertical-align: inherit;">

        变换：无;"vertical-align: inherit;">"vertical-align: inherit;">

        box-shadow：none;"vertical-align: inherit;">"vertical-align: inherit;">

    }

    "vertical-align: inherit;">"vertical-align: inherit;">

    .pricingdiv a.pricebutton {"vertical-align: inherit;">"vertical-align: inherit;">

        显示：块;"vertical-align: inherit;">"vertical-align: inherit;">

    }"vertical-align: inherit;">"vertical-align: inherit;">

}

我首先将父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

"vertical-align: inherit;">"vertical-align: inherit;">.pricingdiv ul.theplan li：last-of-type {"vertical-align: inherit;">"vertical-align: inherit;">

    text-align：center;"vertical-align: inherit;">"vertical-align: inherit;">

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

}

结论

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


新闻名称：使用CSSFlexbox创建等高定价表
转载注明：http://www.cdxtjz.cn/article/piocps.html

其他资讯