在我看來，定價表是最簡潔有效的方式，可以快速捕捉并向潛在客戶傳達您的服務和優(yōu)勢一目了然。最近我正在為我的網(wǎng)站查看一個很好的定價表，并且?guī)缀跛羞@些都意識到了問題 - 他們沒有垂直響應。我的意思是，定價表中的每一列都有自己的高度，基于內(nèi)部的內(nèi)容量。我需要一個相等高度的定價表，其中所有列共享相同的高度而不依賴于表。
這是一個相等高度定價表的示例，我將向您展示如何使用CSS Flexbox進行創(chuàng)建。注意每列的高度與其對等點的高度相同，即使它們都有不同的內(nèi)容行。此外，嵌入了號召性用語按鈕的最后一個LI始終是底部對齊的：
簡而言之，以下是創(chuàng)建等高定價表的兩個關鍵CSS規(guī)則：
讓我從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元素包含不同數(shù)量的LI條目。目標是使每個UL具有相同的高度，并且每個定價計劃的最后一個LI條目在最底部排列。
我發(fā)現(xiàn)這是最簡單的方法嗎？使用CSS flexbox并將每個UL設置為 flex-direction:column使它們垂直擴展以匹配最長的flex兒童的高度。我將在下面詳細解釋。
這是等高定價表的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 |
|
我首先將父DIV容器設置為display:flex，并允許flex子項包裝并使用flex-wrap: wrap 和水平居中justify-content: center。所有兒童UL元素都被認為是兒童。
對于每個由UL元素組成的定價表，我都設置了 flex-direction:column。默認情況下，flex子項在水平軸上播放。通過設置direction:column，我強制flex兒童的所有默認行為發(fā)生在垂直平面上，包括默認情況下金色獎勵等于高度flex兒童。
所以DIV中的所有單獨定價表現(xiàn)在都是相同的高度，但仍然需要一個重要的改進來使一切看起來都很精致。我希望調(diào)用操作按鈕（包含在每個UL的最后一個LI中）與表格的最底部對齊。
要做到這一點涉及兩個步驟。首先，我將每個UL定價表設置為一個flexbox容器本身（display: flex）。完成后，我可以使用該margin屬性將特定子元素與其對等元素對齊，例如左對齊或右對齊以用于水平彈性子元素，或者在此情況下為垂直彈性子元素，頂部或底部。
為了使最后一個LI元素在底部對齊，要添加的神奇成分margin-top: auto在這些元素中：
1 2 3 4 |
|
正如您所看到的，CSS Flexbox使創(chuàng)建高度相同，響應迅速，甚至在頁面中心的元素變得輕而易舉。它幫助我解決了我所見過的許多CSS定價表中的大多數(shù)問題。我希望你能找到我有所幫助的技巧。
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
重慶分公司
重慶分公司
