使用CSS Flexbox創建等高定價表

發布時間：2020-05-27 00:42:37 來源：網絡閱讀：499 作者：二哈少爺欄目：移動開發

在我看來，定價表是最簡潔有效的方式，可以快速捕捉并向潛在客戶傳達您的服務和優勢一目了然。最近我正在為我的網站查看一個很好的定價表，并且幾乎所有這些都意識到了問題 - 他們沒有垂直響應。我的意思是，定價表中的每一列都有自己的高度，基于內部的內容量。我需要一個相等高度的定價表，其中所有列共享相同的高度而不依賴于表。

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

簡而言之，以下是創建等高定價表的兩個關鍵CSS規則：

HTML標記

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

五

<div class =“pricingdiv”>

<ul class =“theplan”>

<li class =“title”> 第二名 Herman Miler </ li>

<li> 體重： 55磅</ li>

<li> 最大重量： 330磅</ li>

<li> <a class="pricebutton" href="#"> 結帳</a> </ li>

</ UL>

<ul class =“theplan”>

<li class =“title”> 第一名 Argomax主席</ li>

<li> 材料：尼龍帶透氣玻璃纖維</ li>

<li> 頭枕：是</ li>

“

</ UL>

<ul class =“theplan”>

<li class =“title”> 第三名 Eurotech Mesh </ li>

<li class =“ethighlight”> 尺寸： 24.8W x 47.3H </ li>

“

<li> <a class="pricebutton" href=""> 結帳</a> </ li>

</ UL>

</ DIV>

如您所見，每個UL.theplan元素包含不同數量的LI條目。目標是使每個UL具有相同的高度，并且每個定價計劃的最后一個LI條目在最底部排列。

我發現這是最簡單的方法嗎？使用CSS flexbox并將每個UL設置為 flex-direction:column使它們垂直擴展以匹配最長的flex兒童的高度。我將在下面詳細解釋。

CSS

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

五

三十

.pricingdiv {

顯示：flex;

flex-wrap：wrap;

辯解內容：中心;

}

.pricingdiv ul.theplan {

list-style：none;

保證金：0;

填充：0;

顯示：flex;

彎曲方向：柱;

寬度：260px; / *每張桌子的寬度* /

保證金權利：20px; / *表之間的間距* /

margin-bottom：1em;

邊框：1px實心灰色;

過渡：全部.5s;

}

.pricingdiv ul.theplan：hover {/ *當鼠標懸停在定價表上時* /

變換：規模（1.05）;

過渡：全部.5s;

z-index：100;

box-shadow：0 0 10px灰色;

}

.pricingdiv ul.theplan：last-of-type {/ *刪除最后一個表中的右邊距* /

margin-right：0;

}

/ *每個定價中的最后一個LI * *

.pricingdiv ul.theplan li：last-of-type {

text-align：center;

margin-top：auto; / *將最后一個LI（價格botton li）對齊到UL *的最底部

} 

@media only screen and（max-width：600px）{

.pricingdiv ul.theplan {

border-radius：0;

寬度：100％;

margin-right：0;

}

.pricingdiv ul.theplan：hover {

變換：無;

box-shadow：none;

}

.pricingdiv a.pricebutton {

顯示：塊;

}

}

我首先將父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在這些元素中：

.pricingdiv ul.theplan li：last-of-type {

text-align：center;

}

結論

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

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

使用CSS Flexbox創建等高定價表

HTML標記

CSS

底部對齊每個UL定價表中的最后一個LI

結論

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

使用CSS Flexbox創建等高定價表

HTML標記

CSS

底部對齊每個UL定價表中的最后一個LI

結論

猜你喜歡

最新資訊

相關推薦

相關標簽