全等四宫格.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; line-height: 0; }
.cell>d
今天的文章html实现图片四宫格,CSS-实现全等四宫格的方案【Collection】分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/68258.html
