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，但是不要使用table.tables对布局不好，除非有必要不考虑使用它们

检查以下代码段

＆＃13;

div{
  display:inline-block;
  }

＆＃13;

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

＆＃13;

.container{
  display:flex;
  }

.container div{
  margin:5px;
  }

＆＃13;

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

＆＃13;

希望这有帮助

在3列中显示div

1 个答案: