使用CSS Frasbox创建等高度定价表

让我从HTML标记开始，我希望尽可能干净整洁。为此，我只为每个单独的定价表使用UL列表，所有这些价格表都被包装在DIV容器中：

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty Twenty-one Twenty-two

2nd Place Herman Miler          Weight: 55 lbs          Max Weight: 330 lbs          Check Out                    1st Place Argomax Chair          Material: Nylon w/ Breathable Glass Fiber          Head Rest: Yes          "          "          Check Out                    3rd Place Eurotech Mesh          Dimensions: 24.8W x 47.3H          "          Check Out

如你所见，每一个UL.theplan元素包含不同数量的Li条目。目标是使每个UL的高度相同，并且每个定价计划的最后一个LI条目在最底部对齐。

我找到的最简单的方法是什么？使用CSS FrasBox并设置每个ULflex-direction:column因此，他们垂直扩张，以匹配最长的弯曲儿童的身高。我将在下面更详细地解释。

CSS

这里是等高线定价表的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

.pricingdiv{     显示：flex；     flex-wrap: wrap;     证明内容：中心； } .pricingdiv ul.theplan{     列表样式：无；     margin: 0;     Padding：0；     显示：flex；     FLEX-Direction：Column；     宽度：260px；/* width of each table */     margin-right: 20px;/* spacing between tables */     margin-bottom: 1em;     边框：1PX固体灰；     Transition:all 5s； } .pricingdiv ul.theplan:hover{ /*当鼠标悬停在定价表*//     变换：量表（1.05）；     Transition:all 5s；     z-index: 100;     P.O.Box-Shadow:0 10px gray； } .pricingdiv ul.theplan:last-of-type{ *在最后一张表中删除右边空白*     margin-right: 0; } /*very last LI within each pricing UL */ .pricingdiv ul.theplan li:last-of-type{     Text-align：Center；     margin-top: auto;/*align last LI (price botton li) to the very bottom of UL */ }  @media only screen and (max-width: 600px) {     这个计划{         border-radius: 0;         宽度：100%；         margin-right: 0;      }     PrigIdIVUL.计划：悬停{         变换：无；         盒影：无；      }          PrICIGIDEV A.Price按钮{         显示：块；      } }

首先，将父DIV容器设置为display:flex，并允许Flex儿童以水平方向包装并水平居中。flex-wrap: wrap和justify-content: center. 所有的儿童UL元素被认为是屈曲儿童。

对于每个由UL元素组成的定价表，i flex-direction:column. 默认情况下，Flex儿童在水平轴上播放。通过设置方向：，我强迫Flex儿童的所有默认行为发生在垂直平面上，包括金奖。默认相等高度屈曲儿童 .

在每个UL定价表中对齐最后的LI

因此，DIV内的所有单独的定价表现在都是相同的高度，但仍然需要一个重要的改进，使所有的东西看起来都很漂亮。我希望调用Actudio按钮，它包含在每个UL的最后一个Li中，以与表的最底部对齐。

要做到这一点包括2个步骤。首先，我将每个UL定价表也设置为FrasBox容器本身。display: flex）一旦完成，我就可以使用margin属性将特定子元素与它的对等体对齐，例如对于水平Flex子块的左对齐或右对齐，或者在这种情况下，垂直Flex子、顶部或底部。

为了使最后一个Li元素处于底部对齐，添加的魔法成分是margin-top: auto在这些元素里面：

One Two Three Four

.pricingdiv ul.theplan li:last-of-type{     Text-align：Center；     margin-top: auto;/*align last LI (price botton li) to the very bottom of UL */ }

如果你不熟悉这种使用技巧margin属性将特定Flex子与其他孩子不同，请签出。

结论

正如您所看到的，CSS FLUBBOX使创建的元素具有相同的高度、响应性，甚至以页面为中心。它帮助我解决了我所看到的许多CSS定价表中的大部分问题。我希望你发现我所学的技巧很有帮助。