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 clip-path 用法介绍详解
Mar 01 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python实现的彩票机选器实例
2015/06/17 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
Java如何支持I18N?
2016/10/31 面试题
十佳美德少年事迹材料
2014/02/05 职场文书
研修第一天随笔感言
2014/02/15 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
医生个人年终总结
2015/02/28 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
世界十大狙击步枪排行榜
2022/03/20 杂记