商品组标签模块适配

[liqinuo]

实现商品组内标签模块的适配问题，如图效果：

HTML 结构如下：

<div class="mall_recommend">
    <div class="mall_recommend_item mall_recommend_tags">
        <div class="tags">
            <a href="#"><em>标签</em></a>
            ...
        </div>
    </div>
    <a class="mall_recommend_item" href="#">
        <div class="cover">
            <img src="http://fpoimg.com/290x290?bg_color=dddddd">
        </div>
        <div class="info">...</div>
    </a>
</div>

核心 SASS 代码：

.mall_recommend_tags {
    position: relative;
    /* 这里模拟 cover 的高度 */
    &::before {
        content: '\20';
        display: block;
        padding-top: 100%;
        height: 0;
        overflow: hidden;
    }
    /* 这里模拟 info 的高度 */
    &:after {
        content: '\20';
        display: block;
        width: 100%;
        height: 75px; /* .info 高度 */
    }
    .tags {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        padding-bottom: 8px; /* 上下元素间隙高度总和 */
        a {
            /* 代码省略：两栏布局 */
            height: 20%; /* 高度占比 */
            margin-bottom: 2px;
	        em {
           /* 代码省略：文字水平垂直居中 */
           }
       }
   }
}