html实现图片四宫格,CSS-实现全等四宫格的方案【Collection】

全等四宫格.png

如上图，需求如下：

一个未知宽高的容器，要被均分为四个相同大小格子(即四个容器)，且格子间有10px间距(即十字型空隙)，有哪些方法可以解决呢？

分析问题

一般实现布局，用的多的是CSS的几大属性display float position flex。

其中display的应用很灵活，用的最多的是table和table-cell；float实现浮动排列，多行可以每行套个容器，也可以不套而是在每行第一个元素前生成用于清除浮动的隐藏内容(::before display:block clear:both; height:0; line-height:0; overflow:hidden; visibility:hidden;)；

flex就不用多说了，专为布局而生；

position实现布局需要考虑精确位移，可能需要用到top right bottom left transform:translate() calc()。要注意的是设置position:absolute;的元素是也可以通过设置margin(这个之前记错了，以为设置定位的元素不能使用margin)的来实现定位。(仅CSS而言，暂时想不到其他实现精确位移的方式了)

结构设定

统一CSS设置：

/*CSS Reset*/

.container, .container * { padding: 0; margin: 0;