html并列图片自适应后错位,css3响应式图片列表高度不同导致页面错位

骑猪看日落 2022-10-06 08:52 174阅读 0赞

响应式图片列表高度不同导致页面错位 前端html代码分析 由于是响应式布局，不能用css固定图片的宽高，从代码上看，这里每个图文用的是li，而且每4个li是一排，我们只需要对第1个li 第5个li 第9个li 。。。就是每排的第1个li加入css代码clear:left;即可 例如上面列子的 .portfolio-list li :nth-child(4n+5) \{ clear :left;\} 这样添加好css代码后，可解决错位问题 小知识：CSS3选择器nth-child(n)实现隔几行选择元素 nth \[…\]

响应式图片列表高度不同导致页面错位

![ac67bbdceacade9ff636e1de3c1aab1e.png][]

前端html代码分析

![fba414bb329c51656cf4e7fe30fb8d73.png][]

由于是响应式布局，不能用css固定图片的宽高，从代码上看，这里每个图文用的是li，而且每4个li是一排，我们只需要对第1个li 第5个li 第9个li 。。。就是每排的第1个li加入css代码clear:left;即可

例如上面列子的

.portfolio-list li:nth-child(4n+5) \{

clear:left;

\}

这样添加好css代码后，可解决错位问题

小知识：CSS3选择器nth-child(n)实现隔几行选择元素

nth-child(n)，n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素，不论元素的类型。

序号写法：

li:nth-child(3)\{background:orange;\}/\*把第3个LI的背景设为橙色\*/

倍数写法：

li:nth-child(3n)\{background:orange;\}/\*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色\*/

倍数分组匹配：

li:nth-child(3n+1)\{background:orange;\}/\*匹配第1、第4、第7、…、每3个为一组的第1个LI\*/

li:nth-child(3n+5)\{background:orange;\}/\*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI\*/

li:nth-child(5n-1)\{background:orange;\}/\*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI\*/

隔三行设置颜色

$("tr:nth-child(3n)").css("background","\#eee");

每隔三行的第二行和第三行设置颜色

$("tr:nth-child(3n)").css("background","\#eee");

$("tr:nth-child(3n+2)").css("background","\#ccc");

![3dd57195710dd1cf6358891150dbc9ef.gif][]

说点什么吧

全部评论(0)

最新

最早

![b402e70167674402e87c23fea8a187e5.gif][]

还没有评论，快来抢沙发吧！

[ac67bbdceacade9ff636e1de3c1aab1e.png]: /images/20221005/2c792f6c84f246f5a0b70f0d8c252f8c.png
[fba414bb329c51656cf4e7fe30fb8d73.png]: /images/20221005/75db79f0eca44827923fd789bbd62168.png
[3dd57195710dd1cf6358891150dbc9ef.gif]: /images/20221005/faf7701f1c9c4b8cb0d2bcddfb8302bf.png
[b402e70167674402e87c23fea8a187e5.gif]: /images/20221005/4dd53e3b215b456c937a61987bf0743a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关图片滑入页面html,html5+css3全屏响应式图片滑动预览代码

html5+css3全屏响应式图片滑动预览代码，左右箭头按钮控制图片水平滑动轮播，鼠标悬停图片还有好看的文字和按钮动画特效。 ![cd94bfdceb31f4269b2d14

灰太狼/ 2023年10月04日 16:04/ 0 赞/ 23 阅读

相关小程序图片高度自适应

页面需要显示长图片（超过一屏），本来以为像以前一样给其父级的盒子不给高度就行了，结果并不是想象中的那样，根本不起作用！！！这是一个坑，关键在于image标签的一个属性：m

た入场券/ 2022年10月08日 11:22/ 0 赞/ 187 阅读

相关 html并列图片自适应后错位,css3响应式图片列表高度不同导致页面错位

响应式图片列表高度不同导致页面错位前端html代码分析由于是响应式布局，不能用css固定图片的宽高，从代码上看，这里每个图文用的是li，而且每4个li是一排，我们只需要对第

骑猪看日落/ 2022年10月06日 08:52/ 0 赞/ 175 阅读

相关 html页面高度自适应的特点,css如何高度自适应浏览器高度？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。 ![682b19391f3

悠悠/ 2022年10月06日 08:00/ 0 赞/ 369 阅读

相关 ListView 闪烁图片错位问题

本文转自[http://www.trinea.cn/android/android-listview-display-error-image-when-scroll/][htt

浅浅的花香味﹌/ 2022年09月25日 10:16/ 0 赞/ 196 阅读

相关 CSS3图片响应式居中

img { width: 100%; object-fit: cover; } img {

叁歲伎倆/ 2022年07月16日 00:16/ 0 赞/ 298 阅读

相关响应式图片(自适应图片)

> 在这篇文章中讨论的新特性 — `srcset/sizes/<picture>` — 都已经被新版本的现代浏览器和移动浏览器所支持（包括Edge，而不是IE）。解决的

迷南。/ 2022年03月07日 19:40/ 0 赞/ 357 阅读

相关响应式图片(自适应图片)

> 在这篇文章中讨论的新特性 — `srcset/sizes/<picture>` — 都已经被新版本的现代浏览器和移动浏览器所支持（包括Edge，而不是IE）。解决的

谁践踏了优雅/ 2022年03月07日 19:38/ 0 赞/ 323 阅读

相关小程序图片高度自适应

小程序图片高度自适应 image标签的一个属性：mode=“widthFix” <image src="{ {item.cover}}" class

曾经终败给现在/ 2022年01月10日 02:39/ 0 赞/ 372 阅读

相关图片列表换行错位,图片无法左对齐怎么办

图片与文字标题组成的无序列表,会因为标题长度的不同,而出现换行.这样就出现图片无法左对齐的问题. 可以这样, 一,加上这个css样式 .nowrap\{white-spa

￡神魔★判官ぃ/ 2021年09月25日 17:10/ 0 赞/ 384 阅读