使用CSSflexbox创建一个干净的CSS比较表-创新互联

CSS和HTML比较表是一种强大的方式,可以即时向访问者传达您的产品的主要功能,以及它们的不同之处。通常,比较表和定价表是相同的。对我来说,比较表的不同之处在于它应该包含列出所有可用功能的额外列。这样可以很容易地比较计划并找出它们的不同之处。

创新互联建站电话联系:18980820575,为您提供成都网站建设网页设计及定制高端网站建设服务,创新互联建站网页制作领域十年,包括成都护栏打桩机等多个领域拥有丰富的网站营销经验,选择创新互联建站,为网站锦上添花。

HTML标记

对于标记,我正努力使其尽可能干净简约。我决定使用外部主DIV元素,然后是一系列UL列表来呈现比较表中的每个“行”内容:

使用CSS flexbox创建一个干净的CSS比较表

比较表必须由多个彼此堆叠的UL组成。我将使用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

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

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

    

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

            

  • 办公椅"vertical-align: inherit;">"vertical-align: inherit;">

            


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

            


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

            


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

            


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

        

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

        

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

              

    • 重量"vertical-align: inherit;">"vertical-align: inherit;">

              

    • 25公斤"vertical-align: inherit;">"vertical-align: inherit;">

              

    • 13公斤"vertical-align: inherit;">"vertical-align: inherit;">

              

    • 17公斤"vertical-align: inherit;">"vertical-align: inherit;">

              

    • 28公斤"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;">

                

      • $ "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;">

                  

        • 投放"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;">

              

              "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;">

                    

          • 所有冷却网格"vertical-align: inherit;">"vertical-align: inherit;">

                    

          • 只有顶级皮革椅子"vertical-align: inherit;">"vertical-align: inherit;">

                

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

                

每个UL中的第一个LI元素是特征/图例。为了便于隔离和设置它们与其他包装的不同,我给那些LI元素一个CSS类“传奇”。

CSS:

现在是有趣的部分 - 将标记转换为比较表。使用CSS Flexbox,转换UL元素相对容易,因此它们在布局,弯曲和拉伸方面是水平的,因此它们更像表格单元格。

我删除了一些不必要的行,这样你就可以专注于下面的重要部分:

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

"vertical-align: inherit;">"vertical-align: inherit;">div.comparisontable {"vertical-align: inherit;">"vertical-align: inherit;">

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

    弯曲方向:柱; "vertical-align: inherit;">/ *将儿童ul元素转换为堆叠行* /"vertical-align: inherit;">"vertical-align: inherit;">

}

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

div.comparisontable ul.row {"vertical-align: inherit;">"vertical-align: inherit;">

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

    显示:flex; "vertical-align: inherit;">/ *将儿童li元素转换为flex儿童* /"vertical-align: inherit;">"vertical-align: inherit;">

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

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

}

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

div.comparisontable ul.row li {"vertical-align: inherit;">"vertical-align: inherit;">

    背景:#c9f4ca;"vertical-align: inherit;">"vertical-align: inherit;">

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

    填充:10px;"vertical-align: inherit;">"vertical-align: inherit;">

    border-bottom:1px实心灰色;"vertical-align: inherit;">"vertical-align: inherit;">

}

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

/ *图例列(每行中的第一个li)* /"vertical-align: inherit;">"vertical-align: inherit;">

div.comparisontable ul.row li.legend {"vertical-align: inherit;">"vertical-align: inherit;">

    背景:#6640d8;"vertical-align: inherit;">"vertical-align: inherit;">

    白颜色;"vertical-align: inherit;">"vertical-align: inherit;">

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

    宽度:200px;"vertical-align: inherit;">"vertical-align: inherit;">

    边框底部:1px纯白色;"vertical-align: inherit;">"vertical-align: inherit;">

}

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

/ *第一行* /"vertical-align: inherit;">"vertical-align: inherit;">

div.comparisontable ul.row:first-of-type li {"vertical-align: inherit;">"vertical-align: inherit;">

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

}

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

/ *最后一行* /"vertical-align: inherit;">"vertical-align: inherit;">

div.comparisontable ul.row:last-of-type li {"vertical-align: inherit;">"vertical-align: inherit;">

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

    border-bottom:none;"vertical-align: inherit;">"vertical-align: inherit;">

    box-shadow:0 6px 6px rgba(0,0,0,0.23);"vertical-align: inherit;">"vertical-align: inherit;">

}

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

/ *图例列中的第一个和最后一个单元格* /"vertical-align: inherit;">"vertical-align: inherit;">

div.comparisontable ul.row:first-of-type li.legend.legend,"vertical-align: inherit;">"vertical-align: inherit;">

div.comparisontable ul.row:last-of-type li.legend {"vertical-align: inherit;">"vertical-align: inherit;">

    背景:透明;"vertical-align: inherit;">"vertical-align: inherit;">

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

}

“要素列表”或图例列是每行的第一个LI元素。它的显式宽度为200px,与其他柔性宽度的LI元素(flex:1)不同。

使比较表响应

现在,比较表没有响应。也就是说,即使屏幕尺寸变得非常小,每行内的“列”也是并排的。

在CSS弹性框中,我们可以通过将flex-direction属性从“row”设置为“”,将flex子元素的显示顺序从默认的“并排”行为轻松更改为“堆叠在下一个上面”。柱”。

现在在我的比较表中,UL元素本身是堆叠的,尽管子LI元素像表格中的单元格一样并排出现。当屏幕变得足够小时,我会将它们更改为堆叠:

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

"vertical-align: inherit;">"vertical-align: inherit;">@media screen和(max-width:650px){

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

div.comparisontable ul.row {"vertical-align: inherit;">"vertical-align: inherit;">

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

}

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

div.comparisontable img {"vertical-align: inherit;">"vertical-align: inherit;">

    宽度:自动;"vertical-align: inherit;">"vertical-align: inherit;">

    身高:自动;"vertical-align: inherit;">"vertical-align: inherit;">

}

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

div.comparisontable ul.row li {"vertical-align: inherit;">"vertical-align: inherit;">

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

    宽度:自动;"vertical-align: inherit;">"vertical-align: inherit;">

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

}

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

/ *图例列中的第一个和最后一个单元格* /"vertical-align: inherit;">"vertical-align: inherit;">

div.comparisontable ul.row:first-of-type li.legend.legend,"vertical-align: inherit;">"vertical-align: inherit;">

div.comparisontable ul.row:last-of-type li.legend {"vertical-align: inherit;">"vertical-align: inherit;">

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

}

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

div.comparisontable ul.row li.legend {"vertical-align: inherit;">"vertical-align: inherit;">

    宽度:自动;"vertical-align: inherit;">"vertical-align: inherit;">

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

}

现在,当我向下调整窗口大小时,比较表会折叠,每个“单元格”都会出现在它自己的行上:

已知问题

最后但并非最不重要的是,比较表存在一个小问题。当你调整它的大小时,在某些时间间隔,一些LI的宽度会变得不同步:

使用CSS flexbox创建一个干净的CSS比较表

如果您知道解决方案,请发送电子邮件给我(1394016233@qq.com)。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:使用CSSflexbox创建一个干净的CSS比较表-创新互联
链接地址:http://pwwzsj.com/article/dggdej.html