css - 使用 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

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

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

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

默认情况下，DIV 被视为block元素，这意味着它们会自动从新行开始。因此，如果您希望它们显示为内联，则需要使用display: inline-block;或指定float:left；

Answer 4

使用 divs/sections，定义你想要的列数，比如说 4 列...

http://jsfiddle.net/tBDjV/

<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;
}