如何 append div 在 jquery 中按行排列？

Question

On click on some button I am looking to append the div using ID and I would like to display added items each time row wise, maximum of 6 items in a row. The below code is adding to bottom each time, not in horizontal wise. How can i add as below screenshot?

html:

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

jquery code:

$(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 for the below class:

.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

In your pull-bottom CSS class, the float property should be left in this case.

In the current state, each row will take the full width avalaible.

Fiddle: https://jsfiddle.net/fh42xatu/

Answer 2

May be using grid can get you 6 cells.

 $(document).ready(function() { $("#save").on("click", function() { if ($('#area').children().length == 6) return; $("<div>", { class: "cell", append: `Column - ${$('#area').children().length + 1}`, appendTo: "#area" }) }); });

 * { margin: 0; box-sizing: border-box; } #area { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1em; }.cell { background: #fafafa; height: 50px; padding: 1em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="save">SAVE</button> <div id="area"></div>

Answer 3

You can use flex :

 const NewClientProject = (pName, cName) => { return $("<div>", { class: "cell", append: `${pName||"Project Name"}<br>${cName||"Client Name"}`, appendTo: "#dashboardArea" }); } jQuery( $ => { $("#toDashboard").on("click", function() { $('#overlay').fadeOut(300); NewClientProject($("#pName").val(), $('#cName').val()); }); }); NewClientProject(); NewClientProject();

 * {margin:0; box-sizing:border-box;} #dashboardArea { display: flex; flex-flow: row wrap; } #dashboardArea.cell { background: #e3e8e7; flex: 0 0 22%; margin: 1% 1.5%; min-height: 140px; padding: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="pName" placeholder="Project Name" type="text"> <input id="cName" placeholder="Client Name" type="text"> <button id="toDashboard">Save to Dashboard</button> <div id="dashboardArea"></div>