文章/答案/技术大牛

发布

社区首页 >问答首页 >是否可以在视觉上水平显示行而不是垂直显示行？

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

Stack Overflow用户

提问于 2019-06-21 13:02:13

回答 1查看 42关注 0票数 0

我想要显示一组相邻的图像

   <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张图片吗？

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

javascript

php

jquery

datatables

回答 1

Stack Overflow用户

发布于 2019-06-21 14:01:58

您可以使用css grid或flex来实现这一点。我已经尝试使用css grid，请找到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
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56697111

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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