CSS实现九宫格布局(自适应)的示例代码


Posted in HTML / CSS onFebruary 12, 2022

简介

        本文用示例介绍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>

结果

CSS实现九宫格布局(自适应)的示例代码

方案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>

结果

CSS实现九宫格布局(自适应)的示例代码

方案3:absolute

代码

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        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:'';
            left:10px;
            right:10px;
            top:10px;
            bottom:10px;
            border-radius:10px;
        .item:after{
            content:attr(data-index);
            height:30px;
            margin:auto;
            text-align:center;
    </style>
</head>
<body>
<div class="container">
    <div class="item" data-index="1">
    </div>
    <div class="item" data-index="2">
    <div class="item" data-index="3">
    <div class="item" data-index="4">
    <div class="item" data-index="5">
    <div class="item" data-index="6">
    <div class="item" data-index="7">
    <div class="item" data-index="8">
    <div class="item" data-index="9">
</div>
</body>
</html>

结果

CSS实现九宫格布局(自适应)的示例代码

到此这篇关于CSS实现九宫格布局(自适应)的示例教程的文章就介绍到这了,更多相关css九宫格布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 box-sizing属性
Apr 17 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 #HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 #HTML / CSS
HTTP中的Content-type详解
Jan 18 #HTML / CSS
POST提交数据常见的四种方式
Jan 18 #HTML / CSS
Html5获取用户当前位置的几种方式
html粘性页脚的具体使用
Jan 18 #HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 #HTML / CSS
You might like
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
繁简字转换功能
2006/07/19 Javascript
filemanage功能中用到的common.js
2007/04/08 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
python实现图片识别汽车功能
2018/11/30 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
军训的自我鉴定
2013/12/10 职场文书
个人租房协议书范本
2014/09/30 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
计划生育工作总结2015
2015/04/03 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
mysql查找连续出现n次以上的数字
2022/05/11 MySQL