溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了CSS中如何使用Frasbox創(chuàng)建等高度定價表，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty Twenty-one Twenty-two |
|
如你所見，每一個UL.theplan元素包含不同數(shù)量的Li條目。目標是使每個UL的高度相同，并且每個定價計劃的最后一個LI條目在最底部對齊。
我找到的最簡單的方法是什么？使用CSS FrasBox并設(shè)置每個ULflex-direction:column因此，他們垂直擴張，以匹配最長的彎曲兒童的身高。我將在下面更詳細地解釋。
這里是等高線定價表的CSS。我刪除了不重要的部分，所以你可以把重點放在重要的事情上：
One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty Twenty-one Twenty-two Twenty-three Twenty-four Twenty-five Twenty-six Twenty-seven Twenty-eight Twenty-nine Thirty Thirty-one Thirty-two Thirty-three Thirty-four Thirty-five Thirty-six Thirty-seven Thirty-eight Thirty-nine Forty Forty-one Forty-two Forty-three Forty-four Forty-five Forty-six Forty-seven Forty-eight Forty-nine Fifty Fifty-one Fifty-two Fifty-three |
|
首先，將父DIV容器設(shè)置為display:flex，并允許Flex兒童以水平方向包裝并水平居中。flex-wrap: wrap和justify-content: center. 所有的兒童UL元素被認為是屈曲兒童。
對于每個由UL元素組成的定價表，i flex-direction:column. 默認情況下，F(xiàn)lex兒童在水平軸上播放。通過設(shè)置方向：，我強迫Flex兒童的所有默認行為發(fā)生在垂直平面上，包括金獎。默認相等高度屈曲兒童 .
因此，DIV內(nèi)的所有單獨的定價表現(xiàn)在都是相同的高度，但仍然需要一個重要的改進，使所有的東西看起來都很漂亮。我希望調(diào)用Actudio按鈕，它包含在每個UL的最后一個Li中，以與表的最底部對齊。
要做到這一點包括2個步驟。首先，我將每個UL定價表也設(shè)置為FrasBox容器本身。display: flex）一旦完成，我就可以使用margin屬性將特定子元素與它的對等體對齊，例如對于水平Flex子塊的左對齊或右對齊，或者在這種情況下，垂直Flex子、頂部或底部。
為了使最后一個Li元素處于底部對齊，添加的魔法成分是margin-top: auto在這些元素里面：
One Two Three Four |
|
上述內(nèi)容就是CSS中如何使用Frasbox創(chuàng)建等高度定價表，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
