Question

我想显示一组彼此相邻的图像

   <table id="datatable" class="table table-colored table-info">
    <thead>
     <tr >
   <th>Product_Name</th>
   <th>Image</th>
 </tr>
</thead>
<tbody>
    <?php while ($players_list=m ysqli_fetch_array($players_fun)) { ?>
 <tr>
   <td>
   <?php echo $players_list[ 'product_name']; ?>
   </td>
   <td>
   <div class="col-sm-4">
  <img src=" <?php echo $players_list[ 'product_IMAGE']; ?>" >
   </div>
   </td>
 </tr>
 <?php }?>
</tbody>
    </table>

这是我的桌子，我可以在每行显示3-3张图像吗？

实际上，我想利用数据表的搜索和排序功能。

Answer 1

您可以使用CSS grid或flex来实现。我尝试使用CSS网格，请找到here

.img-vertical {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // sets the horizontal layout
    grid-gap: 1em;
    place-content: center;
}

.img-vertical img {
    max-width: 50px;
}

.img-horizontal {
    grid-template-columns: repeat(1, 1fr); // sets vertically
}

或者，flex实现如下所示

.img-vertical {
    display: flex; 
    align-items: center;
    flex-flow: column; // sets vertically
}

.img-vertical img {
    max-width: 50px;    
}

.img-horizontal {
    flex-flow: row; // sets the horizontal layout
}

是否可以在视觉上水平显示行而不是垂直显示行？

1 个答案: