用html和css制作九宫格,我就是要用CSS实现九宫格图

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

我就是要用CSS实现九宫格图-1.jpg (10.42 KB, 下载次数: 0)

2020-7-21 10:52 上传

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

图片大小自适应；

图片个数不同时，图片按照指定方式排列；

图片相邻处有1px空白间隙。我们以最复杂的6图布局为例，一步一步来看如何以纯CSS实现。

1、float布局

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

图片大小自适应：宽度百分比，高度使用 padding-top 百分比

图片个数不同时，图片按照指定方式排列：使用 nth-child 伪类指定不同情况下的元素大小

图片相邻处有1px空白间隙：使用 border-box + border模拟边框

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

让我们一瞅伪码：

XHTML

XML/HTML Code复制内容到剪贴板

      

1

...       </