javascript - 在 3 列中显示 div

Question

我试图在三列排列的 div 中显示我从数据库中获取的数据，所以我这样做了:

    <table id="produse">
    <thead>
        <tr>
            <th class="fluid">First Column</th>
            <th class="fixed">Fixed Column</th>
            <th class="fluid">Third Column</th>
        </tr>
    </thead>
    <tbody>
        <tr></tr>
    </tbody>
</table>

在 javaScript 文件中我这样做了:

function getRow(aparat){

    var row ='<td>'+'<div id="prod">'+
        '<div>'+ '<img src='+aparat.imagine+' width="150" height="80" />' +'</div>'+
        '<div>'+ aparat.nume + '</div>' +                                                    //functia care le aranjeaza
        '<div>'+ aparat.pret +'&nbsplei' + '</div>'+
        '<div>'+'<button type = "button" id = "comanda">'+'Comanda'+'</button>'+'</div>'
        + '</div>'+'</td>';

        return row;
}

但是它只在一行中显示我的产品，有什么解决办法吗？

Answer 1

您可以使用 display:flex 或 display:inline-block，但不要为此使用表格。表格对布局不利，除非必要不要考虑使用它们

检查以下代码片段

div{
  display:inline-block;
  }

<div>
  column-1
  </div>
<div>
  column-2
  </div>
<div>
  column-3
  </div>

.container{
  display:flex;
  }

.container div{
  margin:5px;
  }

<div class="container">
            <div>col1</div>
  
            <div>col2</div>
  
            <div>col3</div>
  </div>

希望对你有帮助