Использование CSS для создания вертикального стека эскизов

Question

Я пытаюсь создать вертикальный стек эскизов изображений. Один миниатюру в строке.

Я пытаюсь обновить свои навыки CSS. У меня это работает с использованием таблицы

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

Я хотел бы, чтобы не использовать таблицу и выполнить это с помощью дивы и CSS. В этом я лучше контролирую интервал и макет в будущем.

Любые мысли?

Answer 1

Очень просто:

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

ДИВ является элемент уровня блока. Если вы не указали другие мудрые действия, он действует аналогично знаку <tr>.

Answer 2

Используйте простой div и поместите некоторые идентификаторы для каждого img. В CSS для одного и того же вы можете изменить свойства другого идентификатора.

Answer 3

Я бы порекомендовал вам начать с изучения DIV и их свойств. W3 Schools - хорошее начало.

Чтобы начать работу с вами просто сделать:

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

DIVs по умолчанию рассматриваются как block элементов означает, что они начинают с новой строки автоматически. Поэтому, если вы хотите, чтобы они отображались в строке, вам необходимо указать это либо с помощью display: inline-block;, либо float:left;

Answer 4

Используйте дивы/разделы, определить, сколько столбцов вы хотите, позволяет сказать, 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; 
}