CSS之布局系列

2023-06-23 05:26| 来源: 网络整理| 查看: 265

原文网址：CSS之布局系列--九宫格布局(自适应)--方法/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

本文用示例介绍CSS进行九宫格布局的方法。

朋友圈、微博等很多社交平台都是使用九宫格布局来展示图片的，九宫格布局也是前端面试经常会问的问题。

本文只展示自适应布局的方案。不展示手动指定宽度的那种方案。

方案1：grid

grid是专门用来处理二维的，最适合用来二维布局。

代码

This is title .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-gap: 10px; padding: 10px; } .item { border: 1px solid black; } 1 2 3 4 5 6 7 8 9

结果

方案2：flex+calc()

因为flex是面向一维的，所以我们需要加上calc这个函数控制其垂直方向。

代码

This is title .container { width: 100%; display: flex; /*换行*/ flex-wrap: wrap; } .item { width: calc(calc(100% / 3) - 10px); height: 100px; margin: 5px; box-sizing: border-box; border: 1px solid black; } 1 2 3 4 5 6 7 8 9

结果

方案3：absolute

代码

This is title html,body{ height:100%; margin:0; } .container{ position:absolute; left:0; top:0; right:0; bottom:0; } .item{ float:left; height:100px; width: calc(calc(100% / 3) - 10px); position:relative; border: 1px solid black; } .item:before{ content:''; position:absolute; left:10px; right:10px; top:10px; bottom:10px; border-radius:10px; } .item:after{ content:attr(data-index); position:absolute; height:30px; left:0; right:0; top:0; bottom:0; margin:auto; text-align:center; }

结果

【本文地址】

公司简介

联系我们