1

我需要创建一个包含 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 标记为 200 像素高度。图像与其单元格的顶部和底部对齐。如果我将 TD 标签的高度切换为 800 像素（示例 #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 回答