纯 CSS 实现高度与宽度成比例的效果

.item {  float: left;  margin: 10px 2%;  width: 21%;}

看完别人的讲解我觉得重点是理解的是padding这个属性，一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，即使对于 padding-bottom 和 padding-top 也是如此。

意思也就是说，padding的高和宽 都是对于父类元素的宽。

借用别人网站事例，效果如下图：

效果页面：http://jsfiddle.net/luin/25BbH/7/