Question

我需要创建一个包含2个单元格（或2个div。无所谓）的表格，它将包含在TD标签中，如下所示：

<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），则图像仍应正确对齐。

alignment sample 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>

Answer 1

试试这个 - DEMO

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

HTML：在单元格的顶部和底部对齐图像

1 个答案: