纯CSS实现等高价目表 _CSS

很多提供企业级服务的应用，都会有一个价目表。
不同等级的服务所包含的功能不同，功能数量也不同，因此每个价目表的高度也不同。
但为了 UI 的美观，我们通常需要把几个价目表做成等高的样子，并且让购买按钮始终居于底部，如下图所示：

文章插图
等高价目表
html 代码在编写 HTML 结构时，要尽量减少不必要的标签和嵌套，让代码看起来整洁，这样才有利于后期的维护修改：

<div class="demo"><div class="box"><div class="title">标准型 NORMAL</div><ul class="list"><li class="item"><strong>600MB</strong> 磁盘空间</li><li class="item"><strong>16GB</strong> 月流量</li><li class="item"><strong>4</strong> MySQL数据库</li><li class="item"><strong>4</strong> 停靠域名</li><li class="item"><strong>无限</strong> 子域名数量</li><li class="item"><strong>4</strong> 建站数</li><li class="item">中文的cPanel面板</li></ul><button class="btn">立刻购买</button></div><div class="box"><div class="title color2">进阶型 ADVANCED</div><ul class="list"><li class="item"><strong>1600MB</strong> 磁盘空间</li><li class="item"><strong>49GB</strong> 月流量</li><li class="item"><strong>4</strong> MySql数据库</li><li class="item"><strong>4</strong> 停靠域名</li><li class="item"><strong>无限</strong> 子域名数量</li><li class="item"><strong>4</strong> 建站数</li><li class="item"><strong>无限</strong> FTP数量</li><li class="item"><strong>php</strong> 支持语言</li><li class="item">中文的cPanel面板</li></ul><button class="btn">立刻购买</button></div><div class="box"><div class="title color3">专业型 PROFESIONAL</div><ul class="list"><li class="item"><strong>2000MB</strong> 磁盘空间</li><li class="item"><strong>160GB</strong> 月流量</li><li class="item"><strong>14</strong> MySql数据库</li><li class="item"><strong>14</strong> 停靠域名</li><li class="item"><strong>无限</strong> 子域名数量</li><li class="item"><strong>4</strong> 建站数</li><li class="item"><strong>无限</strong> FTP数量</li><li class="item"><strong style="color: #C42871;">免费</strong> SSL证书</li><li class="item"><strong>PHP</strong> 支持语言</li><li class="item">中文的cPanel面板</li><li class="item">免备案</li></ul><button class="btn">立刻购买</button></div></div>

我们每个 ul.list 元素下的 li.item 标签数目都不一样，因为不同的服务对应不同数量的功能。
【纯CSS实现等高价目表】但这样也使得每个 ul.list 元素的高度不同，下面就要使用神奇的 css 来扭转乾坤。
CSS 代码话不多说，直接上代码，一边看代码一边看注释，逻辑都在注释里：

.demo {display: flex;justify-content: space-around;}.box {display: flex;flex-direction: column;width: 200px;margin: 0;padding: 0;border: 1px solid #ddd;}.title {line-height: 80px;background-color: #00AAD5;text-align: center;color: #fff;}.color2 {background-color: #95C83D;}.color3 {background-color: #F5891F;}.list {padding: 40px 20px;}.item {margin-top: 10px;list-style: none;color: #8e959c;font-size: 14px;}.item strong {color: #000;font-size: 16px;}.btn {width: 160px;line-height: 40px;margin: auto auto 20px;background-color: #80bf28;border: 1px solid #80bf28;border-radius: 4px;box-shadow: 0px 4px 0px #5a951d;color: #fff;}

简单又实用的 CSS 技巧，你学会了吗？