给一组div设置浮动但是最后一个div再调用后台数据之后会向下偏移20px左右

Question

上面是html代码  下面是css代码，在这里我将man_list设置浮动等样式，在静态文件中显示都是正常的，但是通过后台调用数据后每行的最后一个div就会向下偏移20px左右？

<div id="man_info">

<div class="man_wrapper clearfix">

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

<div class="man_list">

<a href="#"><img src="images/index/man.png" /></a>

<div class="man_zl">

<p class="bh">会员编号：878654</p>

<p class="dz">澳大利亚<span class="man_age">44岁</span></p>

</div>

</div>

</div>

</div>

</div>

css代码

#man,#man_info,.man_search{width: 100%;}

.man_search .index_wrapper{height: 38px;background-color: #000033;margin-top: 24px;margin-bottom: 20px;}

.man_form {margin-left: 62px;position: relative;}

.man_form span{color: #fff;line-height:38px;}

.man_form select{width: 92px;height: 22px;border: 1px solid #686876;line-height: 22px;font-size: 12px;padding-left: 12px;color: #808080;margin-right: 20px;}

#man_btn{width: 70px;height: 22px;background-color: #FF0078;border: #B99AAF solid 1px;

position: absolute;top:9px;right:40px;color: #fff;line-height: 20px;}

.man_wrapper{width: 1109px;margin: 0 auto;padding-left: 9px;}

.man_list{width: 176px;height: 240px;float: left;margin-right: 8.8px;position: relative;margin-bottom: 10px;}

.man_list img{width: 176px;height: 240px;}

.man_list a {width: 176px;height: 240px;display: inline-block;}

/*修改*/.man_zl{font-size: 12px;line-height: 20px;padding-left: 14px;position: absolute;bottom: 0;

color: #fff;z-index: 3;display: none;background-color: rgba(0,0,0,0.4);width: 162px;height: 240px;}

.man_age{margin-left: 70px;display: inline-block;}

/*增加*/.bh{margin-top: 190px;}

Answer 1

内容把div宽度撑大了，就把最后一个挤下来了