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

骑猪看日落 2022-10-06 08:52 153阅读 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 条评论，153人围观）

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

相关阅读

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

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

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

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

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

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

相关 ListView 闪烁图片错位问题

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

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

相关【vue系列】高度宽度不等的图片列表自适应

效果图 ![在这里插入图片描述][171794d764c1b6205a5651aae24d66d4.png] ![在这里插入图片描述][a9c46401ef97ea8e

傷城~/ 2022年08月30日 11:59/ 0 赞/ 228 阅读

相关 CSS3图片响应式居中

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

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

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

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

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

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

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

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

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

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

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

相关 jquery根据图片宽度同比例设置图片高度,图片自适应高度

用jq根据图片的宽度同比例设置图片高度,有时图片宽度好控制,但高度一般都是auto,如果为了自适应,不方便直接设置图片的高度heght,可以用下载的方法

深藏阁楼爱情的钟/ 2021年09月26日 01:20/ 0 赞/ 542 阅读

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

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

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