是否可以在视觉上水平显示行而不是垂直显示行？
提问于 2019-06-21 05:02:13
我想要显示一组相邻的图像
<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张图片吗？
实际上，我想利用数据表的搜索和排序功能。
回答 1
Stack Overflow用户
发布于 2019-06-21 06: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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56697111
复制
腾讯云开发者
