css图片九宫格布局

我在这里分享一下用flex布局实现的图片自适应九宫格布局。

首先，每个图片的宽度要给到刚好一排放下三个，所有的图片放在大盒子div里面，flex布局，``具体看代码

<div id="box"><img src="0.jpg" ><img src="0.jpg" ><img src="0.jpg" ><img src="0.jpg" ><img src="0.jpg" ><img src="0.jpg" ><img src="0.jpg" ><img src="0.jpg" ><img src="0.jpg" ></div>

下面是css
我们使用了flex弹性盒布局，其中，flex-wrap:wrap的作用是：让弹性盒元素在必要的时候拆行，在这里也即图片每行超过三张就换行（因为宽度每行只能放三张），justify-content: space-between; ：均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。

#box{width:310px;height:310px;margin:50px auto;display:flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;background-color: rgb(228, 226, 226);}#box>img{width:100px;height: 100px;object-fit: cover;}

效果图：

现在，九宫格已经实现了，那么，如果图片不是九张，而是八张，七张呢？这么写会不会有什么问题？我们来去掉一张图片，看看效果图
可以看到最后一行出现问题了，按照我们平时看得的，最后两张图片应该要靠左边对齐排列，而它们却是朝左右均分开来，这是因为上面提到的justify-content: space-between;这个css属性，因为只有两张图片，最后一行没有占满，才出现了这个情况，那么如何解决呢？
很简单，只需要用到css的伪元素 after即可，下面看代码：

#box:after{content:'';display:block;width:100px;}

结果图：

可以看到，给大盒子加上伪元素后，这个问题已经解决了。
这里的关键点在于after伪元素的宽度要设置的跟图片一样，这个时候可能又有一个问题，如果我这里是九张图片，那这个伪元素是不是就多占了个地方，最下面会多出一行？答案是不会的，我们先来看结果图：

可以看到，并不会有“多出来的一行”，这是因为我们的after伪元素只给了宽度，没有给高度，所以他是不会显示出来的

css图片九宫格布局相关推荐

CSS实现九宫格布局方法
在实际开发中经常会遇到九宫格布局,所以总结几种利用CSS实现九宫格布局的方法,仅供参考... 目录: 利用grid创建网络布局利用display:table 利用absolute方位值利用floa ...
css实现九宫格布局的几种方案
实现效果如下: 首先,定义好通用的HTML结构: <div class="box"><ul><li>1</li><li> ...
自适应图片九宫格 css,CSS实现自适应九宫格布局大全
看到微博和朋友圈都实现了图片九宫格,曾经有次面试也问到了九宫格这个问题,当时想到的是先固定每个单元格的宽高,然后进行浮动.今天想折腾一下,实现自适应父元素宽度的布局.这次我只写了四种方式去实现九宫格, ...
html5九宫格布局,CSS实现自适应九宫格布局（完整方法大全）
看到微博和朋友圈都实现了图片九宫格,曾经有次面试也问到了九宫格这个问题,当时想到的是先固定每个单元格的宽高,然后进行浮动.今天想折腾一下,实现自适应父元素宽度的布局.这次我只写了四种方式去实现九宫格, ...
html5图片列表纵向,div css图片列表实例布局案例ul li布局
DIV CSS布局图文列表布局案例 ul li图文列表使用div css ul li布局图文列表小局部案例,学习图文列表布局实际案例. div+css图文布局案例图本案例在DIVCSS5模板基础上 ...
css img 适配尺寸_img图片自适应布局_HTML5教程_郭隆邦技术博客
图片自适应布局源码下载使用百度图片搜索的时候,可以看到搜索页面,所有的图片基本都是定高度显示,图片的宽度随着高度等比例缩放.点击搜搜页面的每一张图片, 可以跳转到一个页面只有一张图片,显示的尺寸是 ...
CSS实现图片自适应布局
CSS实现图片自适应布局最轻松的写法 <div class="container">// 这里图片尺寸为440X440像素,<img src="./i ...
html九宫格布局原理,了解CSS九宫格布局的几大实现方法
九宫格布局在制作一些Web App时还是经常可以用到的,本篇文章带大家了解一下CSS九宫格布局的几大实现方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前提说明除非特别说明, ...
css设置图标居左_「css图片居中」css - 常用垂直/水平居中 + 左右布局 - seo实验室...
css图片居中主要内容学习文献元素居中胡子哥 - 谈一谈我在阿里的成长 + 2 左右布局几种常见的CSS布局 -- 掘金 BFC 实现三栏布局的几种方法-- github 实现多列等高布局 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...

css图片九宫格布局

我在这里分享一下用flex布局实现的图片自适应九宫格布局。

css图片九宫格布局相关推荐

最新文章

热门文章