图片几个列表的排版效果,最后一个填充解决
<script type="text/javascript"> $(document).ready( function () { $(".d_list_c:nth-child(3n)").css({"margin-right":"0","float":"right"}); } ); </script>
代码排版:
<div class="d_list"> <div class="d_list_c"> <div class="d_list_c_img"> <img src="images/list.jpg" /> </div> <div class="d_list_t"> <h3>时尚新中式吊灯具88001-8H</h3> <p>镇店之宝 精工铁艺 进口布艺灯罩 高级环保树脂</p> </div> <div class="d_list_buy"> <div> <span class="s_jg"><em>¥</em>840</span><del>¥1800</del> </div> </div> <a href="">立即抢购</a> </div> <div class="d_list_c"> <div class="d_list_c_img"> <img src="images/list.jpg" /> </div> <div class="d_list_t"> <h3>时尚新中式吊灯具88001-8H</h3> <p>镇店之宝 精工铁艺 进口布艺灯罩 高级环保树脂</p> </div> <div class="d_list_buy"> <div> <span class="s_jg"><em>¥</em>840</span><del>¥1800</del> </div> </div> <a href="">立即抢购</a> </div> <div class="d_list_c"> <div class="d_list_c_img"> <img src="images/list.jpg" /> </div> <div class="d_list_t"> <h3>时尚新中式吊灯具88001-8H</h3> <p>镇店之宝 精工铁艺 进口布艺灯罩 高级环保树脂</p> </div> <div class="d_list_buy"> <div> <span class="s_jg"><em>¥</em>840</span><del>¥1800</del> </div> </div> <a href="">立即抢购</a> </div> </div>
样式书写:
/*列表*/ .d_list{width:1200px; height:auto; min-height:500px; background:#f1f1f1; margin:30px auto} .d_list .d_list_c{width:381px; height:auto; float:left; margin-right:25.5px; margin-bottom:25px; background:#fff; border:solid 1px #ddd; border-bottom:none 0; position:relative; /*transition:all 1s ease 0s;*/-webkit-transition:box-shadow 0.2s linear} .d_list .d_list_c:hover{box-shadow:1px -2px 5px #ccc} .d_list .d_list_c .d_list_c_img{width:auto; height:auto; padding:3px} .d_list .d_list_c .d_list_c_img img{width:375px; height:273px} .d_list .d_list_c .d_list_t{width:auto; height:40px; padding:10px} .d_list .d_list_c .d_list_t h3{font-size:14px; font-weight:normal} .d_list .d_list_c .d_list_t p{color:#ff5959; font-size:13px; margin-top:3px} .d_list .d_list_c .d_list_buy{width:auto; height:55px; line-height:65px; color:#FFF; background:#f4f4f4; position:relative} .d_list .d_list_c .d_list_buy div{width:auto; height:55px; background:#ff5959; margin-top:3px } .d_list .d_list_c .d_list_buy div span.s_jg{width:100px; height:30px; line-height:30px; font-size:30px; font-weight:bolder; margin-left:25px} .d_list .d_list_c .d_list_buy div span.s_jg em{font-size:18px; font-style:normal; margin-right:5px} .d_list .d_list_c .d_list_buy div del{margin-left:15px; color:#eee} .d_list .d_list_c a{display:block; width:160px; height:60px; text-align:center; line-height:60px; font-size:24px; color:#ff5959; font-weight:bolder; text-decoration:none; background:url(../images/buy.png) no-repeat center center; position:absolute; bottom:-3px; right:-1px} .d_list .d_list_c a:hover{color:#F30}
如果你做的时候还有其他方法也可以提出来,这里我只讲了其中一种解决浮动的方法,用jq解决。
效果图如下:
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/326.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!