css - CSS を使用してサムネイルの縦方向のスタックを作成する

Question

画像サムネイルの垂直スタックを作成しようとしています。1 行に 1 つのサムネイル。

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スクールは良いスタートです。

始めるには、次のようにします。

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