图片几个列表的排版效果，最后一个填充解决

<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

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！