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

Question

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

我正在努力提升我的CSS技能。我使用下面的命令来处理这个表

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

我不想使用表，而是使用div和CSS来完成此任务。这是我对未来的间距和布局有了更好的控制。

有什么想法吗？

Answer 1

非常简单：

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

div是一个块级元素。除非您另外指定，否则它的作用类似于<tr>标记

Answer 2

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

Answer 3

我建议您从了解DIVs及其属性开始。W3 Schools是一个很好的开始。

要开始使用您的应用程序，只需执行以下操作：

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

默认情况下，block被视为DIVs元素，这意味着它们会自动从新行开始。因此，如果你想让它们以内联的形式出现，那么你需要使用display: inline-block;或float:left来指定；