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中Transform动画属性用法详解
Jul 04 HTML / CSS
详解css3 object-fit属性
Jul 27 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 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动态生成VRML网页
2006/10/09 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
优秀研究生自我鉴定
2013/12/04 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
党员群众路线承诺书
2014/05/20 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
Python os和os.path模块详情
2022/04/02 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis