使用CSS创建垂直的缩略图堆栈

我正在尝试创建一个垂直的图像缩略图堆栈。每行一个缩略图

我正在努力提升我的CSS技能。我有一张桌子，使用

<table>
<tr>
 <td><img /></td>
</tr>
<tr>
 <td><img /></td>
</tr>
<tr>
 <td><img /></td>
</tr>
</table>

我不想使用表，而是使用div和CSS来完成这项工作。这是因为我对未来的间距和布局有更好的控制

有什么想法吗？

非常简单：

<div><img /></div>
<div><img /></div>
<div><img /></div>

---

div是块级元素。除非您指定了其他方式，否则它的作用类似于

标记

使用一个简单的div并为每个img放置一些id。在CSS中，您可以修改不同id的属性。

我建议您从了解div及其属性开始。这是一个好的开始

要开始学习，只需执行以下操作：

<div>
   <img src="" />
</div>
<div>
    <img src="" />
</div>
<div>
    <img src="" />
</div>

---

默认情况下，div被视为

块

元素，这意味着它们自动从新行开始。因此，如果您希望它们以内联方式显示，则需要使用

display:inline block或
浮动：左
 使用div/sections，定义需要多少列，比如说4列



.col-1、.col-2、.col-3、.col-4{
浮动：左；
宽度：22%；
保证金权利：4%；
框大小：边框框；
}
.最后{
右边距：0；
}
我知道这一点：（我试图对CSS太过花哨，但错过了基本内容。谢谢。或者，您可以指定
img{display:block}
并省略了
div
s。他每行只需要一个缩略图。这个解决方案对于所需内容来说过于复杂。这实际上更符合我所寻找的内容，并且帮助很大。我知道我并没有要求达到这样的复杂程度，但我正在尝试学习如何使用div而不是表，因此它对我很有价值。
<div class="col-1">
    <img />
    <img />
    <img />
</div>
<div class="col-2">
    <img />
    <img />
    <img />
</div>
<div class="col-3">
    <img />
    <img />
    <img />
</div>
<div class="col-4 last">
    <img />
    <img />
    <img />
</div>

.col-1, .col-2, .col-3, .col-4 {
float: left;
width: 22%;
margin-right: 4%;
box-sizing: border-box;
}

.last {
margin-right: 0;
}