首页 推广常识 电商常识 设计常识 技术分享 创业故事 科技头条 网站运营 网页设计
主页 > 专业知识 > 常见问答 >

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

作者:easou 发布时间:2020-01-04 17:51 浏览量:

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

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


由于是响应式布局,不能用css固定图片的宽高,从代码上看,这里每个图文用的是li,而且每4li是一排,我们只需要对第1li 5li 9li 。。。就是每排的第1li加入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;}/*把第3LI的背景设为橙色*/

倍数写法:

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

 

倍数分组匹配:

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

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

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

 

隔三行设置颜色

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

 

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

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

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

 


08
2017-12

怎么做百度竞价推广效果好?

很多企业在做竞价排名,但是总感觉结果还不尽人意。竞价排名有一定的规律,而这个完全建立在客户的意愿上,同样一笔费用怎么来操作,才能找到不同的效果。找不到原因的可以看...
11
2019-05

营销网站建设核心要点_【易搜无忧】

最终的产品或服务都需要面向客户,然而网站建设的产品或服务得到用户的认可,就必须要了解用户的需求,做到想用户之所想,急用户之所急,这样才能得到用户的认可。一般情况下...
11
2019-05

营销型商城网站建设需要注意的事项

随着互联网时代的全面覆盖应用,许多企业都开始转型布局互联网,其中电子商务便是互联网带给传统企业的一种商业模式。所以企业要想在互联网取得全面的发展,进行 商城网站建设...
24
2019-04

论主机对网站建设的重要性-广州易搜

这是一个老生常谈的问题,但也总是随着时间变化不乏新意。就像网站建设一样,不同的时间段有不同的技术趋势,不同的用户群体有不同的需求倾向。作为网站安全、稳定、快速运行...
11
2020-01

网站穿插式布局

一、 网站穿插式布局 这种布局在企业站中较难看到,用的不多, banner 区域相对较大,可以作为一种布局的选择。 面的六种布局方式只是一些常见的企业类网站页面布局,布局的方式...
24
2019-04

网站设计应该如何做:用户体验很重

一个好的 网站设计 ,可以很好的促进公司和企业的知名度。不仅如此,对于浏览和访问的客户而言,这也是一种很好的 浏览体验 。现在很多的公司和企业都会重视网站的设计这一步骤...
27
2019-12

织梦添加图片水印的方法

一、 织梦添加图片水印的方法 1. 打开 dede/swfupload.php ,找到 第 100 行 代码如下 : //WaterImg($cfg_basedir.$fileurl, up); 把这句话前面的 // 去掉 ,即可! 2. 用 FTP 替换 data/mark/mark.png 图片文件为...
12
2017-12

易搜荣获汇桔网2017年度十大资源商奖

12月11日 易搜受邀参加了汇桔网在萝岗区科学城汇华希尔顿逸林酒店举办的资源商颁奖晚宴盛典并荣获汇桔网2017年度十大资源商之一。 易搜(广州)科技有限公司(前数掘网络科技有限...