Using CSS to create a vertical stack of thumbnails - css

Question

I am trying to create a vertical stack of image thumbnails. One thumbnail per line.
I am trying to upgrade my CSS skills. I have this working with a table using
<table>
<tr>
<td><img /></td>
</tr>
<tr>
<td><img /></td>
</tr>
<tr>
<td><img /></td>
</tr>
</table>
I'd like to not use a table and accomplish this using divs and CSS. This was I have better control over the spacing and layout in the future.
Any thoughts?

Answer 1

Very simple:
<div><img /></div>
<div><img /></div>
<div><img /></div>
A div is a block level element. Unless you specified other wise it acts similarly to a <tr> tag

Answer 2

Use a simple div and put some id's for every img. In CSS for the same you can modify the properties of the different id.

Answer 3

I would recommend you start by learning about DIVs and their properties. W3 Schools is a good start.
To get started with yours simply do:
<div>
<img src="" />
</div>
<div>
<img src="" />
</div>
<div>
<img src="" />
</div>
DIVs by default are treated as block elements meaning they start on a new line automatically. So if you want them to appear inline then you will need to specify that by either using display: inline-block; or float:left;

Answer 4

Use divs/sections, define how many columns you want, lets say 4 columns...
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;
}