0

約45枚の画像と、画像の下にいくつかのキャプションが記載されたテーブルがあります。私が問題を抱えているのは、画像の後に大きなテキストキャプションが続く場合に各画像を適切に配置することです（4.jpgのキャプションを参照）。複数行のテキストがある場合、上部の画像が行の他の画像よりもわずかに上に押し出されます。これがなぜなのか正確に理解するのに苦労しています。

テーブル要素の最初の行は次のとおりです。

<table>
    <tr>
    <td><a href="photos/1.jpg" title="354 Address Way"><img src="photos/1_t.jpg" width="72" height="72" alt="" /></a>House</td>
    <td><a href="photos/2.jpg" title="354 Address Way"><img src="photos/2_t.jpg" width="72" height="72" alt="" /></a>House</td>
    <td><a href="photos/3.jpg" title="Foyer"><img src="photos/3_t.jpg" width="72" height="72" alt="" /></a>Foyer</td>
    <td><a href="photos/4.jpg" title="Family Room with small fireplace"><img src="photos/4_t.jpg" width="72" height="72" alt="" /></a>Family Room with small Fireplace</td>
    <td><a href="photos/5.jpg" title="Family Room 2"><img src="photos/5_t.jpg" width="72" height="72" alt="" /></a>Family Room 2</td>
    </tr>

テーブルCSS：

table {
    width: 570px;
    font-size: .5em;
    text-align: center;
}

table td {
    width: 128px;
    padding: 0px 10px 0px 10px;
}

table img {
    border: 5px solid #3e3e3e;
    border-width: 2px 2px 2px;
}

table a:hover img {
    border: 5px solid #fff;
    border-width: 2px 2px 2px;
    border-color: #8f8f8f;
    color: #fff;
}

キャプションの長さに関係なく、画像を均一に並べたいのですが。

4

2 に答える 2

2

デフォルトでは、テーブルのセルは中央に垂直に配置されます。vertical-align: topおそらくいくつかの追加のパディングを使用して、それらをに設定するだけです。

http://jsfiddle.net/LBb6B/

于 2013-02-18T03:34:26.627 に答える
2

vertical-align:topテーブルセルにルールを追加します。デフォルト値はベースラインですが、値を上に設定する必要があります。

table td {
    width: 128px;
    padding: 0px 10px 0px 10px;
    vertical-align:top;
}

jsFiddleの例

于 2013-02-18T03:34:35.243 に答える