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

使用div / 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;
}

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

4 个答案: