下图是手Q吃喝玩乐 好友去哪儿九宫格图的图示：
从上图我们可以分析出如下需求：
- 图片大小自适应；
图片个数不同时，图片按照指定方式排列；
图片相邻处有1px空白间隙。
我们以最复杂的6图布局为例，一步一步来看如何以纯CSS实现。
1、float布局
最容易想到的，也是最简单的方案，就是 float 布局：
图片大小自适应：宽度百分比，高度使用 padding-top 百分比
图片个数不同时，图片按照指定方式排列：使用 nth-child 伪类指定不同情况下的元素大小
图片相邻处有1px空白间隙：使用 border-box + border模拟边框
这里父元素的高度未知，height使用百分比行不通，而padding的百分比值是依据父元素的宽度来计算的，我们可以使用padding-top撑开高度。
让我们一瞅伪码：
XHTML
学习交流
- 绿毒越狱软件 完美越狱4.21教程12-21
- htcg15怎么刷机？htcg15刷机教程12-21
- HTC hd7刷安卓2.2全教程12-21
- mpkg软件下载和卸载的方法12-21
- 网站后台系统设置的网站地址格式写法07-09
- 防止重复提交js按钮变灰07-09
- 不同时间显示不同的广告代码07-09
- iframe框架调用高度自适应方法07-09
- 备份数据库出现问题的解决方法07-09
热门图片
猜你喜欢的新闻
