html - 在表格中使用 div 的 html/css

Question

我有一个表格单元格，我希望在单元格顶部显示一些内容，在底部显示其他内容。

我正在尝试在单元格中使用 div 来完成此操作，但它不起作用。

使用 CSS 来完成这个有限的任务也很好，但是，在 css 中重做整个页面不是一种选择，因为整个站点都以表格形式布局。

这里 jsfiddle 说明了问题：

JSFiddle

这是与 jsfiddle 相同的代码：

<table border="1">
    <tr>
        <td rowspan="2" valign="top">cell 1<div style="align-vertical: bottom">
            want at bottom</div>
        </td>
        <td>cell 2<br>
        <br>
        <br>
        </td>
    </tr>
    <tr>
        <td>cell 3</td>
    </tr>
</table>

Answer 1

使用this的答案，您可以了解如何将 div 放置在包含元素的底部。

你的小提琴看起来像这样：

<table border=1><tr><td rowspan=2 style="position:relative" valign="top">cell 1<div style="position:absolute; bottom:0">bottom</div></td><td>cell 2<br><br><br></td></tr><tr><td>cell 3</td></tr></table>

请记住，您可能需要对向下浮动的 div 进行样式设置以使其看起来不错，但此解决方案将满足您声明的需求。

希望这可以帮助！