javascript - 每 2 项新行

Question

我正在尝试从我的数据库中获取数据并在 html 中列出它们。

HTML:

<section class="flex-container">
    <div id="itemlist" class="productlist"></div>
</section>

JavaScript:

function _getitemlist(arr) {
    var i;
    $("#itemlist").empty();
    for (i = 0; i < arr.length; i++) {
        var t;
        t = "<div id='btnshowitem" + arr[i].itemID + "'><img src='" + serverURL() + "/images/" + arr[i].itemImage + "'width= '200'> <br>" + arr[i].itemName + "<br> Price: $" + arr[i].itemPrice + "</div> <br>";
        $("#itemlist").append(t);
    }
}

如何才能使元素自动以 2 x 2 格式列出？目前，它看起来像这样。

Answer 1

为什么要使用 <td>如果你没有使用 <table> ？

要制作这个 2by2，你只需要将它的样式设置为 2by2，它应该是这样的:

function _getitemlist(arr) {
 var i;

 $("#itemlist").empty();


for (i = 0; i < arr.length; i++) {
      var t;
    t = "<a href='#' id='btnshowitem" + arr[i].itemID + "'><img src='" + serverURL() + "/images/" + arr[i].itemImage + "'width= '200'> <br>" + arr[i].itemName + "<br> Price: $" + arr[i].itemPrice + "</a><br>";
    $("#itemlist").append(t);
}


}

已删除 <td>来自循环函数

.productlist{
  display: flex;
  flex-flow: row wrap;
}

.productlist a{
  display: block;
  width: 50%;
}

这个样式会告诉 productlist 使用 flex alignment 并且他的所有 items 元素都不会有一半的宽度，所以它们只会出现两个行