追加要素的結果不是我想要的

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 
}