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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 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入门之连接mysql数据库的一个类
2012/04/21 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
js prototype和__proto__的关系是什么
2019/08/23 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
python实现井字棋游戏
2020/03/30 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
详解重置Django migration的常见方式
2019/02/15 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python文件操作的简单方法总结
2019/11/07 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
社区活动总结报告
2014/05/05 职场文书
销售人才自我评价范文
2014/09/27 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
论语读书笔记
2015/06/26 职场文书