我就是要用CSS实现九宫格图

下图是手Q吃喝玩乐  好友去哪儿九宫格图的图示：

从上图我们可以分析出如下需求：

• 图片大小自适应；
  图片个数不同时，图片按照指定方式排列；
  图片相邻处有1px空白间隙。

我们以最复杂的6图布局为例，一步一步来看如何以纯CSS实现。

1、float布局

最容易想到的，也是最简单的方案，就是 float 布局：

图片大小自适应：宽度百分比，高度使用 padding-top 百分比
图片个数不同时，图片按照指定方式排列：使用 nth-child 伪类指定不同情况下的元素大小
图片相邻处有1px空白间隙：使用 border-box + border模拟边框

这里父元素的高度未知，height使用百分比行不通，而padding的百分比值是依据父元素的宽度来计算的，我们可以使用padding-top撑开高度。

让我们一瞅伪码：

XHTML

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表