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 选择器 属性选择器介绍
Jan 21 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 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
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python线程池的实现实例
2013/11/18 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python批量启动多线程代码实例
2020/02/18 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
天网工程实施方案
2014/03/26 职场文书
竞选村长演讲稿
2014/04/28 职场文书
施工安全标语
2014/06/07 职场文书
励志演讲稿300字
2014/08/21 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
python实现简单反弹球游戏
2021/04/12 Python
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis