在我看來，定價表是最簡潔有效的方式，可以快速捕捉并向潛在客戶傳達(dá)您的服務(wù)和優(yōu)勢一目了然。最近我正在為我的網(wǎng)站查看一個很好的定價表，并且?guī)缀跛羞@些都意識到了問題 - 他們沒有垂直響應(yīng)。我的意思是，定價表中的每一列都有自己的高度，基于內(nèi)部的內(nèi)容量。我需要一個相等高度的定價表，其中所有列共享相同的高度而不依賴于表。
創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)安定,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
這是一個相等高度定價表的示例，我將向您展示如何使用CSS Flexbox進(jìn)行創(chuàng)建。注意每列的高度與其對等點(diǎn)的高度相同，即使它們都有不同的內(nèi)容行。此外，嵌入了號召性用語按鈕的最后一個LI始終是底部對齊的：
簡而言之，以下是創(chuàng)建等高定價表的兩個關(guān)鍵CSS規(guī)則：
讓我從HTML標(biāo)記開始，我希望盡可能保持干凈和精益。為此，我只為每個單獨(dú)的定價表使用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條目。目標(biāo)是使每個UL具有相同的高度，并且每個定價計劃的最后一個LI條目在最底部排列。
我發(fā)現(xiàn)這是最簡單的方法嗎？使用CSS flexbox并將每個UL設(shè)置為 flex-direction:column使它們垂直擴(kuò)展以匹配最長的flex兒童的高度。我將在下面詳細(xì)解釋。
這是等高定價表的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容器設(shè)置為display:flex，并允許flex子項包裝并使用flex-wrap: wrap 和水平居中justify-content: center。所有兒童UL元素都被認(rèn)為是兒童。
對于每個由UL元素組成的定價表，我都設(shè)置了 flex-direction:column。默認(rèn)情況下，flex子項在水平軸上播放。通過設(shè)置direction:column，我強(qiáng)制flex兒童的所有默認(rèn)行為發(fā)生在垂直平面上，包括默認(rèn)情況下金色獎勵等于高度flex兒童。
所以DIV中的所有單獨(dú)定價表現(xiàn)在都是相同的高度，但仍然需要一個重要的改進(jìn)來使一切看起來都很精致。我希望調(diào)用操作按鈕（包含在每個UL的最后一個LI中）與表格的最底部對齊。
要做到這一點(diǎn)涉及兩個步驟。首先，我將每個UL定價表設(shè)置為一個flexbox容器本身（display: flex）。完成后，我可以使用該margin屬性將特定子元素與其對等元素對齊，例如左對齊或右對齊以用于水平彈性子元素，或者在此情況下為垂直彈性子元素，頂部或底部。
為了使最后一個LI元素在底部對齊，要添加的神奇成分margin-top: auto在這些元素中：
1 2 3 4 |
|
正如您所看到的，CSS Flexbox使創(chuàng)建高度相同，響應(yīng)迅速，甚至在頁面中心的元素變得輕而易舉。它幫助我解決了我所見過的許多CSS定價表中的大多數(shù)問題。我希望你能找到我有所幫助的技巧。
重慶分公司
重慶分公司
