JQuery追加跳过空格后的内容

Question

我正在尝试在div内动态附加卡片。

我的代码如下：

    $.getJSON(url, function(jsonresult2) {


        for (var i = 0; i < 30; i++) {
            phototemp = link_to_photo;
            itemname = link_to_item_name;
            itemcategory = link_to_item_category;


            $("#populateexplore")
                .append('
                       <div class="col-lg-3 col-md-4 col-sm-6" style="float:left">
                       <div class="card"><img src="' 
                       + phototemp 
                       + '" style="width:100%;height:200px;"><div class="container"> <h4> <b> ' 
                       + itemname 
                       + '</b></h4><hr><p>Category:'
                       + itemcategory 
                       + '</p></div></div></div>');
        }
    }).error(function() { sweetAlert("Cannot find the place"); });

卡div的 css 是

.card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     border-radius: 5px; /* 5px rounded corners */
     background-color: #CCC;
     margin-bottom: 10px;
}

问题是输出cads不会浮动在左侧而是在左侧显示空白

https://i.imgur.com/ols6AVx.jpg

我有什么方法可以填写左侧的空白区域吗？