1

次のように、TD タグ内に含まれる 2 つのセル (または 2 つの div。関係ありません) を持つテーブルを作成する必要があります。

<td style="height:200px;">
    <table>
         <tr>
              <td>Top Cell</td>                  
         </tr>
         <tr>
              <td>Bottom Cell</td>
         </tr>
    </table>
</td>

各セルには 1 つの画像が含まれます (下の画像を参照)。ただし、私の問題は、親の TD タグの高さに関係なく、一番上のセルの画像が常に一番上にある必要があり、一番下のセルの画像が常に一番下にある必要があることです。以下の例では、サンプル #1 の親 TD タグの高さが 200px であるとします。画像は、セルの最上部と最下部に配置されます。TD タグの高さを 800px (サンプル #2) に切り替えても、画像は適切に配置されます。

配置サンプル http://functionalevaluations.com/images/imagealignment.jpg

また、テーブル自体に高さをハードコーディングできないことにも言及する必要があります。テーブルの高さは常に親 TD タグの 100% である必要があり、高さの値を手動で調整できる唯一の値は親 TD にあります。

これどうやってするの？ああ、これがテーブルであろうとdivであろうと関係ありません。そこにある必要があるのは、親の TD タグだけです。

最後に、これが現在の HTML です。親の TD は問題なく調整されますが、テーブルの高さは常に 2 つの画像の高さを超えません。親TDと同じ高さになるようには見えません:

   <td width="155" valign="top" rowspan="2" style="border:solid 1px #000;height:200px; ">
        <table border="1" cellspacing="0" cellpadding="0" style="height: 100%;">
            <tr>
                <td valign="top" style="height:50%;">

                        <img src='includes/images/itemImages/TopImage.jpg' border="0" 
                            style="vertical-align: top">
                </td>
            </tr>
            <tr>
                <td valign="bottom" style="height:50%;">
                    <img src='includes/images/itemImages/bottomImage.jpg' border="0" style="vertical-align: bottom">
                </td>
            </tr>
        </table>

    </td>
4

1 に答える 1

14

これを試してください-デモ

HTML

<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td class="top">
            <img src='http://lorempixel.com/100/100' />
        </td>
    </tr>
    <tr>
        <td class="bottom">
            <img src='http://lorempixel.com/100/100' />
        </td>
    </tr>
</table>

CSS

img {
    display: block;
    margin: auto;
}

.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
于 2012-10-25T16:30:11.077 に答える