时间戳

首页 > 解决方案 > 每 2 项新行

javascript - 每 2 项新行

问题描述

我正在尝试从我的数据库中获取数据并在 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 格式列出？目前，它看起来像这样。样本

标签： javascriptjqueryhtmlcss

解决方案

<td>如果你不使用a，你为什么要使用<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%;
}

这种样式会告诉产品列表使用 flex 对齐，并且他的所有 items 元素都不会有一半的宽度，所以它们只会出现两个行

推荐阅读