溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用CSS Flexbox創(chuàng)建等高定價(jià)表

發(fā)布時(shí)間：2020-05-27 00:42:37 來源：網(wǎng)絡(luò) 閱讀：491 作者：二哈少爺 欄目：移動(dòng)開發(fā)

在我看來，定價(jià)表是最簡(jiǎn)潔有效的方式，可以快速捕捉并向潛在客戶傳達(dá)您的服務(wù)和優(yōu)勢(shì)一目了然。最近我正在為我的網(wǎng)站查看一個(gè)很好的定價(jià)表，并且?guī)缀跛羞@些都意識(shí)到了問題 - 他們沒有垂直響應(yīng)。我的意思是，定價(jià)表中的每一列都有自己的高度，基于內(nèi)部的內(nèi)容量。我需要一個(gè)相等高度的定價(jià)表，其中所有列共享相同的高度而不依賴于表。

這是一個(gè)相等高度定價(jià)表的示例，我將向您展示如何使用CSS Flexbox進(jìn)行創(chuàng)建。注意每列的高度與其對(duì)等點(diǎn)的高度相同，即使它們都有不同的內(nèi)容行。此外，嵌入了號(hào)召性用語按鈕的最后一個(gè)LI始終是底部對(duì)齊的：


簡(jiǎn)而言之，以下是創(chuàng)建等高定價(jià)表的兩個(gè)關(guān)鍵CSS規(guī)則：

使用CSS Flexbox創(chuàng)建等高定價(jià)表

HTML標(biāo)記

讓我從HTML標(biāo)記開始，我希望盡可能保持干凈和精益。為此，我只為每個(gè)單獨(dú)的定價(jià)表使用UL列表，所有這些都包含在DIV容器中：

1

2

3

4

五

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><div class =“pricingdiv”></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    <ul class =“theplan”></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li class =“title”> <b>第二名</ b> <br /> Herman Miler </ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li> <b>體重：</ b> 55磅</ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li> <b>最大重量：</ b> 330磅</ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li> <a class="pricebutton" href="#"> <span class =“icon-tag”> </ span>結(jié)帳</a> </ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    </ UL></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    <ul class =“theplan”></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li class =“title”> <b>第一名</ b> <br /> Argomax主席</ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li> <b>材料：</ b>尼龍帶透氣玻璃纖維</ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li> <b>頭枕：</ b>是</ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        “</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        “</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li> <a class="pricebutton" href="#"> <span class =“icon-tag”> </ span>結(jié)帳</a> </ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    </ UL></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    <ul class =“theplan”></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li class =“title”> <b>第三名</ b> <br /> Eurotech Mesh </ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li class =“ethighlight”> <b>尺寸：</ b> 24.8W x 47.3H </ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        “</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        <li> <a class="pricebutton" href=""> <span class =“icon-tag”> </ span>結(jié)帳</a> </ li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    </ UL></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

</ DIV></font></font>

如您所見，每個(gè)UL.theplan元素包含不同數(shù)量的LI條目。目標(biāo)是使每個(gè)UL具有相同的高度，并且每個(gè)定價(jià)計(jì)劃的最后一個(gè)LI條目在最底部排列。

我發(fā)現(xiàn)這是最簡(jiǎn)單的方法嗎？使用CSS flexbox并將每個(gè)UL設(shè)置為 flex-direction:column使它們垂直擴(kuò)展以匹配最長(zhǎng)的flex兒童的高度。我將在下面詳細(xì)解釋。

CSS

這是等高定價(jià)表的CSS。我已經(jīng)刪除了不重要的位，因此您可以專注于重要的事情：

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

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">.pricingdiv {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    顯示：flex;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    flex-wrap：wrap;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    辯解內(nèi)容：中心;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}</font></font><font></font>

<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

.pricingdiv ul.theplan {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    list-style：none;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    保證金：0;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    填充：0;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    顯示：flex;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    彎曲方向：柱;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    寬度：260px; </font><font style="vertical-align: inherit;">/ *每張桌子的寬度* /</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    保證金權(quán)利：20px; </font><font style="vertical-align: inherit;">/ *表之間的間距* /</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    margin-bottom：1em;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    邊框：1px實(shí)心灰色;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    過渡：全部.5s;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}</font></font><font></font>

<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

.pricingdiv ul.theplan：hover {/ *當(dāng)鼠標(biāo)懸停在定價(jià)表上時(shí)* /</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    變換：規(guī)模（1.05）;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    過渡：全部.5s;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    z-index：100;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    box-shadow：0 0 10px灰色;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}</font></font><font></font>

<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

.pricingdiv ul.theplan：last-of-type {/ *刪除最后一個(gè)表中的右邊距* /</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    margin-right：0;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}</font></font><font></font>

<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

/ *每個(gè)定價(jià)中的最后一個(gè)LI * *</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

.pricingdiv ul.theplan li：last-of-type {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    text-align：center;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    margin-top：auto; </font><font style="vertical-align: inherit;">/ *將最后一個(gè)LI（價(jià)格botton li）對(duì)齊到UL *的最底部</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}  </font></font><font></font>

<font></font>

<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

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

    .pricingdiv ul.theplan {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        border-radius：0;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        寬度：100％;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        margin-right：0;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    }</font></font><font></font>

<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    .pricingdiv ul.theplan：hover {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        變換：無;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        box-shadow：none;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    }</font></font><font></font>

    <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    .pricingdiv a.pricebutton {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

        顯示：塊;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    }</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}</font></font>

我首先將父DIV容器設(shè)置為display:flex，并允許flex子項(xiàng)包裝并使用flex-wrap: wrap 和水平居中justify-content: center。所有兒童UL元素都被認(rèn)為是兒童。

對(duì)于每個(gè)由UL元素組成的定價(jià)表，我都設(shè)置了 flex-direction:column。默認(rèn)情況下，flex子項(xiàng)在水平軸上播放。通過設(shè)置direction:column，我強(qiáng)制flex兒童的所有默認(rèn)行為發(fā)生在垂直平面上，包括默認(rèn)情況下金色獎(jiǎng)勵(lì)等于高度flex兒童。

底部對(duì)齊每個(gè)UL定價(jià)表中的最后一個(gè)LI

所以DIV中的所有單獨(dú)定價(jià)表現(xiàn)在都是相同的高度，但仍然需要一個(gè)重要的改進(jìn)來使一切看起來都很精致。我希望調(diào)用操作按鈕（包含在每個(gè)UL的最后一個(gè)LI中）與表格的最底部對(duì)齊。

要做到這一點(diǎn)涉及兩個(gè)步驟。首先，我將每個(gè)UL定價(jià)表設(shè)置為一個(gè)flexbox容器本身（display: flex）。完成后，我可以使用該margin屬性將特定子元素與其對(duì)等元素對(duì)齊，例如左對(duì)齊或右對(duì)齊以用于水平彈性子元素，或者在此情況下為垂直彈性子元素，頂部或底部。

為了使最后一個(gè)LI元素在底部對(duì)齊，要添加的神奇成分margin-top: auto在這些元素中：

1

2

3

4

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">.pricingdiv ul.theplan li：last-of-type {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    text-align：center;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    margin-top：auto; </font><font style="vertical-align: inherit;">/ *將最后一個(gè)LI（價(jià)格botton li）對(duì)齊到UL *的最底部</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}</font></font>

結(jié)論

正如您所看到的，CSS Flexbox使創(chuàng)建高度相同，響應(yīng)迅速，甚至在頁面中心的元素變得輕而易舉。它幫助我解決了我所見過的許多CSS定價(jià)表中的大多數(shù)問題。我希望你能找到我有所幫助的技巧。


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手