如何用CSS做自适应九宫格效果，有几种方法
发布时间：2023-09-26 10:23:07 所属栏目：语言 来源：
导读：今天小编跟大家讲解下有关“如何用CSS做自适应九宫格效果，有多少方法”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。
本文用示例介绍CSS进行九
本文用示例介绍CSS进行九
|
今天小编跟大家讲解下有关“如何用CSS做自适应九宫格效果，有多少方法”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。 本文用示例介绍CSS进行九宫格布局的方法。朋友圈、微博等很多社交平台都是使用九宫格布局来展示图片的，九宫格布局也是前端面试经常会问的问题。本文中仅呈现适用于自适应布局的方案，而非针对手动指定页面边框的选项。 方案1：grid grid是专门用来处理二维的，最适合用来二维布局。 代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>This is title</title> <style> .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; </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </body> </html> 方案2：flex+calc() 因为flex是面向一维的，所以我们需要加上calc这个函数控制其垂直方向。 代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>This is title</title> <style> .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; </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </body> </html> （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
