如何在 HTML 中每行显示 4 个项目答案

【问题标题】：How to show 4 items per row in HTML如何在 HTML 中每行显示 4 个项目
【发布时间】：2019-06-17 09:58:43
【问题描述】：

我有一些物品需要像亚马逊一样显示为每行 4 件物品。下图是亚马逊。

这就是我想要的：

这是我得到的：

代码：

function loadBooksTable(){
axios.get(baseUrlLocal + '/book/info')
.then(function (response) {
    console.log(response)
    console.log(response.data)
    response.data.forEach(request => {
        i=i+1;

        html = '<tr>'
        html +='<td align="center">'+request.ISBN+'</br>' ;
        html +=request.BookName+'</br>' ;
        html +=request.Author+'</br>' ;

        html +=request.PricePerDay + '</br>';
        html +='<img id="thumb" style="width:80px;height:80px" src="./images/'+ request.ISBN +'.png"/>' + '</br>';
        html +=isRented(request.Rented) + '</br>';
       '</td>' ;
        html +='</tr>';
       $('#view-all-books tbody').append(html);
    });
})
.catch(function (error) {
    // handle error
    console.log(error);
});
}

【问题讨论】：

好的，这是一个打字错误。编辑了问题。知道的请回答

标签： jquery html node.js

【解决方案1】：

您为每个td 生成一个新的tr（表格行），因此每个td 都在一个新行上。在循环之后关闭关闭的</td>。还要给tr宽度25%

 axios.get(baseUrlLocal + '/book/info')
.then(function (response) {
    console.log(response)
    console.log(response.data)
    html = ''
    response.data.forEach(request => {
        i=i+1;
        html +='<div class="item">'+request.ISBN+'</br>' ;
        html +=request.BookName+'</br>' ;
        html +=request.Author+'</br>' ;

        html +=request.PricePerDay + '</br>';
        html +='<img id="thumb" style="width:80px;height:80px" src="./images/'+ request.ISBN +'.png"/>' + '</br>';
        html +=isRented(request.Rented) + '</br>';
       '</div>' ;

    });
    $('#view-all-books tbody').append(html);
})

CSS：

.item{
    width: 25%;
    float: left;
}

【讨论】：

这将所有内容放在 1 行中
@Taplar 是真的，进行了编辑。老实说，我宁愿用divs 这样做
ok 小修改 i=i+1;移动到条件之下。工作过

【解决方案2】：

除非您需要支持旧版本的 IE，否则一种非常简单的方法是 CSS 网格：

#thegrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

<div id="thegrid">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

或者您可以使用不太优雅但更广泛支持的“仅使用百分比宽度”：

#thegrid {
  width: 100%
}

#thegrid div {
  width: 24%;
  display: inline-block;
}

<div id="thegrid">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

这两种方法都可以让您不必将列数硬编码到 HTML 结构中，从而更容易响应地更改列数。

【讨论】：