如何将一些元素放在table-cell的顶部，一些元素放在底部？

Question

我需要将一个元素定位在table-cell的顶部角落，并使文本堆叠在底部。我使用了vertical-align: bottom将所有文本向下移动，但现在我有一个问题，因为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是为了让这些列等高并且能够灵活地适应不同长度的文本。

- skyisred

---

你能更详细地描述一下你想要的样式吗？你的包装 div 是否有任何应用于它的样式（除了内联样式）？它有设置高度吗？你想让 .top div 在哪个上角？也许一个图像模拟可能会帮助得到一些好的答案。 - 3dgoo

你想要类似这样的效果吗？http://jsfiddle.net/Kse3g/1/，但不使用CSS中的显式高度来伪造结果？ - 3dgoo

无法加载该链接，抱歉！我在描述中添加了一张小的“图片”:) - skyisred

我认为在使用动态灵活高度的display: table-cell父元素中，不可能有一个绝对定位的子元素。 - 3dgoo

Answer 1

请将以下内容添加到<td>中：

style="vertical-align:top"

- rvdfox

Answer 2

http://jsfiddle.net/Hwvd5/

我的做法是在一个完整的包装器div中加入了position: relative。希望这在跨浏览器的情况下能够正常工作，只在chromium浏览器中进行了测试...

这种方法的问题是，如果不让它们重叠，您将无法让浏览器自动选择与内容相匹配的列高度。 :( 我想不到任何解决办法。

来自JSFiddle的文件

<br /> <br />

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

CSS：

.top {
    position: absolute;        
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: red;
}

h3 {
    position: absolute;
    bottom: 0;    
}

.table {
    display: table-row;
}

.table > div {
    display: table-cell; 
    vertical-align: bottom; 
    border: 1px solid black; 
    padding: 10px; 
    height: 200px;   
}

.table > div > div.wrapper {
    position: relative; 
    width: 100%; 
    height: 100%;   
}​
​

- opatut

---

我也会使用定位将它们设置在底部。指的是子元素 -> 父元素div。 - Si8