PageAdmin CMS网站管理系统官方论坛

注册

 

QQ登录

只需一步,快速开始

发新话题 回复该主题

求助,产品中心列表对齐问题? [复制链接]

1#
求助,产品中心列表对齐问题?
[url]http://www.ifonby.com/index.aspx?lanmuid=87&sublanmuid=755[/url]
分享 转发
TOP
2#

  1. .pro-zxyhhd-box{clear:both;overflow:hidden;}
  2. .pro-zxyhhd-box li{float:left;width:22%;margin-right:3%;overflow:hidden;}
  3. .pro-zxyhhd-box li.zxyhhd-wc3{margin-right:0px;}
  4. .pro-zxyhhd-box li a.pic{clear:both;overflow:hidden;display:block;width:100%;min-height: 300px;}
  5. .pro-zxyhhd-box li a.pic:hover img{}
  6. .pro-zxyhhd-box li img{display:block;width:100%;/*! height:100%; */position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
  7. .pro-zxyhhd-box li a.title{clear:both;overflow:hidden;display:block;margin:0.5em 0px;height:1.5em;line-height:1.5em;color:#666;font-size:14px;text-align:center;}
  8. .pro-zxyhhd-box li a.title:hover{color:#30405B;}
  9. .pro-zxyhhd-box li .jg{display:block;line-height:25px;color:rgb(51, 51, 51);font-size:12px;text-align:center;}
  10. .pro-zxyhhd-box li .jg em{font-size:21px;font-style:normal;}

  11. .sublanmupage .pro-zxyhhd-box li a.title{margin:1em 0px;}
  12. @media only screen and (max-width:480px)
  13. {
  14. .pro-zxyhhd-box li{width:100%;margin-right:0px;}
  15. .pro-zxyhhd-box li.zxyhhd-wc3{margin-right:0px;}
  16. .pro-zxyhhd-box li.zxyhhd-wc2{margin-right:0px;}
  17.   .pro-zxyhhd-box li a.pic{min-height: 400px;}
  18.   .pro-zxyhhd-box li img{max-height:85%;width:auto;max-width:80%}
  19. }
复制代码
一种方法是将图片替换成一样宽高的,这样也好看点
一种是修改一下css,
在comm.css文件中找到这一块,然后用上面的代码替换,
你试试
TOP
3#

第一种太麻烦,第二种方式不行

[b]回复 [url=http://bbs.pageadmin.net/showtopic-38484.aspx#142745]2楼[color=Olive]xiyou[/color]的帖子[/url][/b]

第一种太麻烦,第二种方式不行
comm.css文件是这个吧---->([url]ftp://www.ifonby.com/e/templates/160728/comm.css[/url])
TOP
4#

我说的是把之前的替换掉,你却留在那里,这样会有冲突
TOP
5#

还是没搞定

[b]回复 [url=http://bbs.pageadmin.net/showtopic.aspx?forumpage=1&topicid=38484&page=end&jump=pid#142750]4楼[color=Olive]xiyou[/color]的帖子[/url][/b]

第一次操作出现失误了,不好意思。
这次我先删除的,在粘贴,还是没变化。。。
/*产品表样式*/
.product{overflow:hidden;}
.product table td{text-align:center;padding:5px 0 5px 0}
.product table td img{border:1px solid #ececec;margin:0 5px 0 5px;}

.product_pic{clear:both;overflow:hidden;}
.product_pic li{float:left;text-align:center;width:21%;margin:5px 2% 15px 2%;box-shadow:0px 0px 3px rgba(0, 0, 0, 0.2);}
.product_pic li a{display:block;width:100%;}
.product_pic li img{width:100%;height:auto;}
.product_pic li .title{display:block;text-align:center;background-color:rgb(242,242,242);min-height:60px;}
.product_pic li .title a{display:block;color:rgb(50,61,85);line-height:20px;padding:15px 5%;text-align:left;font-weight:bold;}
.product_pic li .title a:hover{border:0px;}



.pic_pros{clear:both;overflow:hidden;}
.pic_pros .pps_com{float:left;width:23%;margin:10px 1%;}
.pic_pros .pps_com span{width:100%;display:block;text-align:center;overflow:hidden;}
.pic_pros .pps_com .s1 img{-webkit-transition:1s;-moz-transition:1s;width:100%;display:block;}
.pic_pros .pps_com .s1 img:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);}
.pic_pros .pps_com .s2{height:30px;line-height:30px;}



@media only screen and (max-width:640px)
{
.product_pic{width:99%;margin:0px auto;}
.product_pic li{width:46%;}


.pic_pros .pps_com{float:left;width:97%;margin:10px 1.5%;}
}

/*图片列表模型*/

.pro-zxyhhd-box{clear:both;overflow:hidden;}
.pro-zxyhhd-box li{float:left;width:22%;margin-right:3%;overflow:hidden;}
.pro-zxyhhd-box li.zxyhhd-wc3{margin-right:0px;}
.pro-zxyhhd-box li a.pic{clear:both;overflow:hidden;display:block;width:100%;min-height: 300px;}
.pro-zxyhhd-box li a.pic:hover img{}
.pro-zxyhhd-box li img{display:block;width:100%;/*! height:100%; */position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.pro-zxyhhd-box li a.title{clear:both;overflow:hidden;display:block;margin:0.5em 0px;height:1.5em;line-height:1.5em;color666;font-size:14px;text-align:center;}
.pro-zxyhhd-box li a.title:hover{color30405B;}
.pro-zxyhhd-box li .jg{display:block;line-height:25px;color:rgb(51, 51, 51);font-size:12px;text-align:center;}
.pro-zxyhhd-box li .jg em{font-size:21px;font-style:normal;}

.sublanmupage .pro-zxyhhd-box li a.title{margin:1em 0px;}
@media only screen and (max-width:480px)
{
.pro-zxyhhd-box li{width:100%;margin-right:0px;}
.pro-zxyhhd-box li.zxyhhd-wc3{margin-right:0px;}
.pro-zxyhhd-box li.zxyhhd-wc2{margin-right:0px;}
  .pro-zxyhhd-box li a.pic{min-height: 400px;}
  .pro-zxyhhd-box li img{max-height5%;width:auto;max-width0%}
}

/*作品展示模型*/
.pro-zpzs-box{clear:both;overflow:hidden;}
TOP
6#


你清除一下浏览器缓存,应该就可以了
TOP
7#

OK了,十分感谢

[b]回复 [url=http://bbs.pageadmin.net/showtopic.aspx?forumpage=1&topicid=38484&page=end&jump=pid#142752]6楼[color=Olive]xiyou[/color]的帖子[/url][/b]

OK了,十分感谢
TOP
8#

又出现一个问题,360浏览器不兼容,怎么解决?

[b]回复 [url=http://bbs.pageadmin.net/showtopic-38484.aspx#142752]6楼[color=Olive]xiyou[/color]的帖子[/url][/b]

又出现一个问题,360浏览器不兼容,怎么解决?
TOP
9#


找到这个class,在里面添加一句position:relative
TOP
发新话题 回复该主题