如何将一些元素放在表格单元格的顶部,一些元素放在底部？

Question

我需要在表格单元格的顶角放置一个元素,文本应该在底部堆叠.我使用vertical-align:bottom来移动所有文本,但现在我的top元素有问题,因为table-cell不支持相对定位......任何想法如何才能完成？

<div style = "display: table-cell; vertical-align: bottom">
    <div class = "top"> Top corner</div>
    <h2> some text in the bottom </h2>
    <h3> some more text in the bottom </h3>
</div>

编辑:看起来应该是这样的

+-----------+   +-----------+  +------------+
|top text   |   |top text   |  |top text    |
|           |   |           |  |            |
|some long  |   |           |  |            |
|text       |   |           |  |            |
|more long  |   |           |  |            |
|text       |   |           |  |            |
|end of     |   |           |  |some text   |
|text       |   |text       |  |text        |
|<button>   |   |<button>   |  |<button>    |
+-----------+   +-----------+  +------------+

这一切都包含在带有display:table的div中.我之所以要使用display:table-cell,是为了保持这些列的高度相等,并且仍然可以灵活地适应列中不同长度的文本.

Answer 1

将其添加到<td>：

style="vertical-align:top"

Answer 2

http://jsfiddle.net/Hwvd5/

\n\n

基本上我所做的就是将一个全尺寸的包装 div 放入其中，即position: relative. 希望这可以跨浏览器工作，仅在 Chromium 中测试过......

\n\n

这种方法的问题是：您将无法让浏览器自动选择与内容匹配的列的高度而不使它们重叠。:( 我想不出办法解决这个问题。

\n\n

来自 JSFiddle 的文件

\n\n

<br /> <br />\n\n<div class="table">\n    <div>\n        First cell  <br />    \n        First cell  <br />    \n        First cell  <br />    \n        First cell  <br />    \n        First cell  <br />    \n        First cell  <br />    \n        First cell  <br />    \n        First cell  <br />    \n    </div>\n    <div>\n        <div class="wrapper">\n          <div class = "top"></div>\n          <h2> some text in the top </h2>\n          <h3> some more text in the bottom </h3>\n        </div>\n    </div>\n</div>\n

\n\n

CSS：

\n\n

.top {\n    position: absolute;        \n    top: 0;\n    right: 0;\n    width: 10px;\n    height: 10px;\n    background: red;\n}\n\nh3 {\n    position: absolute;\n    bottom: 0;    \n}\n\n.table {\n    display: table-row;\n}\n\n.table > div {\n    display: table-cell; \n    vertical-align: bottom; \n    border: 1px solid black; \n    padding: 10px; \n    height: 200px;   \n}\n\n.table > div > div.wrapper {\n    position: relative; \n    width: 100%; \n    height: 100%;   \n}\xe2\x80\x8b\n\xe2\x80\x8b\n

\n