使用CSSFlexbox创建等高定价表-创新互联
在我看来,定价表是最简洁有效的方式,可以快速捕捉并向潜在客户传达您的服务和优势一目了然。最近我正在为我的网站查看一个很好的定价表,并且几乎所有这些都意识到了问题 - 他们没有垂直响应。我的意思是,定价表中的每一列都有自己的高度,基于内部的内容量。我需要一个相等高度的定价表,其中所有列共享相同的高度而不依赖于表。
建网站原本是网站策划师、网络程序员、网页设计师等,应用各种网络程序开发技术和网页设计技术配合操作的协同工作。成都创新互联专业提供网站制作、成都网站制作,网页设计,网站制作(企业站、自适应网站建设、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!这是一个相等高度定价表的示例,我将向您展示如何使用CSS Flexbox进行创建。注意每列的高度与其对等点的高度相同,即使它们都有不同的内容行。此外,嵌入了号召性用语按钮的最后一个LI始终是底部对齐的:
简而言之,以下是创建等高定价表的两个关键CSS规则:
HTML标记
让我从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
元素包含不同数量的LI条目。目标是使每个UL具有相同的高度,并且每个定价计划的最后一个LI条目在最底部排列。
我发现这是最简单的方法吗?使用CSS flexbox并将每个UL设置为 flex-direction:column
使它们垂直扩展以匹配最长的flex儿童的高度。我将在下面详细解释。
CSS
这是等高定价表的CSS。我已经删除了不重要的位,因此您可以专注于重要的事情:
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儿童的所有默认行为发生在垂直平面上,包括默认情况下金色奖励等于高度flex儿童。
底部对齐每个UL定价表中的最后一个LI
所以DIV中的所有单独定价表现在都是相同的高度,但仍然需要一个重要的改进来使一切看起来都很精致。我希望调用操作按钮(包含在每个UL的最后一个LI中)与表格的最底部对齐。
要做到这一点涉及两个步骤。首先,我将每个UL定价表设置为一个flexbox容器本身(display: flex
)。完成后,我可以使用该margin
属性将特定子元素与其对等元素对齐,例如左对齐或右对齐以用于水平弹性子元素,或者在此情况下为垂直弹性子元素,顶部或底部。
为了使最后一个LI元素在底部对齐,要添加的神奇成分margin-top: auto
在这些元素中:
1 2 3 4 |
|
结论
正如您所看到的,CSS Flexbox使创建高度相同,响应迅速,甚至在页面中心的元素变得轻而易举。它帮助我解决了我所见过的许多CSS定价表中的大多数问题。我希望你能找到我有所帮助的技巧。
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前文章:使用CSSFlexbox创建等高定价表-创新互联
浏览地址:http://scyanting.com/article/iijod.html