いくつかの要素をテーブルセルの上に配置する方法と、下に配置する方法はありますか？

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> 

編集：表：それはこれがすべてのディスプレイ付きの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-cellを使用する理由は、これらの列を高さと同じに保つことと、列内のさまざまな長さのテキストに対応できるように柔軟にすることです。

Answer 1

http://jsfiddle.net/Hwvd5/

基本的に私がやったことはposition: relativeであることへのフルサイズのラッパーのdivを入れていました。これはクロスブラウザで動作し、クロムでのみテストされています。

この方法に問題があります。コンテンツに一致する列の高さをブラウザーに自動的に選択させることはできません。 :(私はこの問題を解決する方法はありませんを考えることができ

ファイルを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%; 
}​ 
​ 

Answer 2

が<td>にこれを追加します。

style="vertical-align:top"