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将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
司机辞职报告范文
2014/01/20 职场文书
党员公开承诺书内容
2014/05/20 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书