追加元素结果不是我想要的

Question

光晕我很困惑 我试图在我的html中追加元素 但结果结果不是我想要的 这里的结果 我想第一排应该是3盒和2排 但为什么结果那样？ append或var html有问题吗？

HTML

<div class="row">
   <div class="col-md-12">
      <div class="x_panel">
         <div class="x_content">
            <div class="clearfix"></div>
            <div id="profiles"></div>                   
         </div>
      </div>
   </div>
</div>

JS

$.ajax({
    context: this,
    url: url,
    type: "POST",
    data: {page:page},
    dataType: "JSON",
    success: function(data) {   
        var html='';
        $.each(data, function (i, valu) {
            html+='<div class="col-md-4 col-sm-4 col-xs-4 profile_details">';
            html+='<div class="well profile_view"><div class="col-sm-12">';
            html+='<h4 class="brief"><i>'+valu.jurusan+'</i></h4>';
            html+='<div class="left col-xs-7"><h2>'+valu.nama+'</h2>';
            html+='<ul class="list-unstyled">';
            html+='<li><i class="fa fa-venus-mars "></i>&nbsp'+valu.jk+'</li>';
            html+='<li><i class="fa fa-map-marker"></i>&nbsp'+valu.kecamatan+','+valu.kota+','+valu.propinsi+'</li>';
            html+='<li><i class="fa fa-phone"></i>&nbsp'+valu.hp+' </li>';
            html+='</ul></div><div class="right col-xs-5 text-center"><img src="'+site_url+'production/images/user.png" alt="" class="img-circle img-responsive">';
            html+='</div></div><div class="col-xs-12 bottom text-center"><div class="col-xs-12 col-sm-6 emphasis">';
            html+='<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user"></i> <i class="fa fa-comments-o"></i> </button>';
            html+='<button type="button" class="btn btn-primary btn-xs"><i class="fa fa-user"> </i> View Profile</button>';
            html+='</div></div></div></div>';
        });
        $('#profiles').append(html);
        $('#load_more').data('val', ($('#load_more').data('val')+1));
        scroll();
    }
});

Answer 1

为元素设置固定高度以正确浮动：

的CSS：

.profile_details {
height:100px;//change this to suit your needs 
}