Question

我有一些项目需要显示为每行4个项目，例如在Amazon中。下图是亚马逊的图片。

这就是我想要的：

这就是我得到的：

代码：

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);
});
}

Answer 1

您为每个tr产生了一个新的td（表行），因此每个td都换了一行。循环后关闭结束的</td>。同时指定tr的{{1}}宽度

25%

CSS：

 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);
})

Answer 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结构中，从而使响应式更改列数变得更加容易。

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

2 个答案: