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 属性来变换背景图的方法
May 07 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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编程语言开发动态WAP页面
2006/10/09 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
不安全的常用的js写法
2009/09/15 Javascript
js 居中漂浮广告
2010/03/21 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
常见的python正则用法实例讲解
2016/06/21 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python中有函数重载吗
2020/05/28 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
高一地理教学反思
2014/01/18 职场文书
小学新学期寄语
2014/04/02 职场文书
校庆团日活动总结
2014/08/28 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
培训感想范文
2015/08/07 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python