【经验分享】商城分类中商品橱窗展示的设计方法（要点：正方形的CSS实现）

华为商城分类中的橱窗展示

概要

本文是在实际的电子商城项目开发中分类中商品橱窗展示中遇到的问题以及解决的办法。

主要有两个方面：
第一、使用flex的方法实现自动排列；
第二、正方形的CSS实现方法；

第一、是比较容易实现的，难点是在正方形的CSS实现方法。

如果要实现自适应的正方形，难度是较大的。必须要让width=hight。但是一般在流式布局的情况下，height要等于width，一般都必须使用js的方法。
这个时候就要用到一些巧妙的方法，让height可以等于width。

使用Flex实现自动排列，功能每行排三个

这个比较简单，直接上代码

    
1
    
2
    
3

效果为：

正方形CSS的实现

第一种方法，使用paddint-bottom

设置padding-bottom撑开容器，关键点：padding可以用百分比，百分比是根据它包含块的width来确定的，也就是父级元素的width。
也就是用padding-bottom:100%，这个100%是采用的width的值，自然就实现了宽和长的相等。

具体代码实现：

    
我和我的祖国，一刻也不能分离

关键部分：

1. padding-bottom:100% 等于width；
2. height: 0；如果不设置，div的内容会把表格撑开；

第二种方法，使用两个div，一个是外层的relative，一个是内层的absolute，利用绝对定位消除空间占比。

实际上这个方法和上一个方法类似，依然是使用padding-bottom的属性。

    

        
我和我的祖国，一刻也不能分离
    

在此使用第二种方法实现橱窗效果，其中将第二个内层的absolute的div标签替换为img，在我的代码中的具体实现为：

    
    

        
        
    
    
    
    
{{ item_1.name }}

具体实现效果：

总结

正方形的实现很巧妙，使用padding-bottom可以很容易实现。在具体的编码中，多去学习前辈的经验，自己多联系，就能达到逐步熟练，达到好的设计效果。