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

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

作者: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");

 


29
2020-04

广州网页设计 web界面设计

互联网时代的到来,企业从中发觉到了商机,愈加努力的建设网站,维护网站成为企业的工作重心,支付和回报总是成正比的,企业从中获取的利益非常大,一个网站如果是设计的更加...
19
2019-12

留言提交后:“DedeCMS 提示信息!”的

织梦提交留言后会显示一个【 dedecms 信息提示!】其实这对网站来说是一个安全隐患!下面我们看看如何修改成其他的内容。 ①打开根目录【 include 】文件夹; ②找到【 common.func.php...
17
2019-05

网站建设必须要掌握的关键密码_广州

网站访问统计账号密码 有些网站公司会主动帮助企业申请开通免费的网站访问统计功能,并且将账号密码发送给企业,或者企业也可以自己去申请免费的网站访问统计系统,例如百度统...
15
2019-05

网站建设常见的安全漏洞及安全防范

随着互联网的发展,网络安全问题越来越受到大家重视,对于企业网站来说安全性一样非常重要,稍有不慎可能就会被人挂木马、挂黑链、留后门等等,一个企业的网站如果出现安全问...
07
2017-12

电商设计是做什么的?

在讲电商设计师的事儿之前,我觉得是有必要把电商这个行业的发展状况给大家屡一下,理所当然的,我就拿目前比较大的几家电商平台的发展来说事儿啦,他们的爱恨纠葛如下图所示...
11
2020-01

网站穿插式布局

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

品牌的力量

一、品牌是什么? 从表面上看,品牌只是一个企业或产品的标牌,但实际上,品牌是它所代表着的价值观、信仰和生活方式,是一种差别化的标志。 品牌是一种价值观,它体现企业和企...
16
2019-05

网站什么时候需要改版 网站改版需要

网站什么时候需要改版 网站具体什么时候需要改版,有哪些决定因素,下面为大家罗列了三条: 第一、访客体验如何 在进行网站改版方案的时候需要首先考虑到访客们的体验如何。用...