javascript - 如何在 jquery 中将 div 逐行追加？

Question

单击某个按钮时，我希望使用 ID 附加 div，并且我希望每次按行显示添加的项目，一行最多 6 个项目。下面的代码每次都会添加到底部，而不是水平方向。我如何添加如下截图？

html:

<div id="dashboardArea" class="wrapper">
</div>

jquery 代码:

$(document).ready(function(){
$("#saveProjecttoDash").click(function() {
    $('#overlay').fadeOut(300);
    let projectName = document.getElementById("enterprojectName").value;
    let clientName = document.getElementById('clientNametochoose').value;
    var someDiv = '<div class="row"><div class="pull-bottom" style="height:500px;background:#e3e8e7">'+projectName+'<br>'+clientName+'</div></div>';
    $('#dashboardArea').append(someDiv);
  });
});

//下面的类的 css:

.pull-bottom {
width: 22%;
margin: 10px 0px 0px 100px;
vertical-align: bottom;
float: none;
    webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 3em;
     -moz-column-gap: 3em;
          column-gap: 3em;
}

Answer 1

在本例中，在 pull-bottom CSS 类中，float 属性应为 left。

在当前状态下，每行将采用可用的完整宽度。

fiddle :https://jsfiddle.net/fh42xatu/