Come posizionare alcuni elementi sopra la cella della tabella e alcuni nella parte inferiore?

Question

Ho bisogno di posizionare un elemento nell'angolo superiore della cella della tabella e il testo dovrebbe essere impilato in basso. Ho usato l'allineamento verticale: in basso per spostare tutto il testo verso il basso, ma ora ho un problema con l'elemento superiore, dato che la cella di tabella non supporta il posizionamento relativo ... qualche idea su come può essere fatto?

<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> 

edit: Dovrebbe essere qualcosa di simile

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

Il tutto è avvolto in un div con display: table. Il motivo per cui voglio usare display: table-cell è qui per mantenere queste colonne uguali in altezza e comunque flessibili per ospitare diverse lunghezze di testo nelle colonne.

Answer 1

http://jsfiddle.net/Hwvd5/

Fondamentalmente quello che ho fatto è stato mettere un full-size involucro div in esso che è position: relative. Spero che questo funzioni cross-browser, solo testato in cromo ...

Problema con questo approccio: non sarà possibile consentire al browser di scegliere automaticamente un'altezza per le colonne che corrispondono al contenuto senza che si sovrappongano. :(ho potuto pensare a un modo per risolvere questo problema

File da 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

Aggiungere questo al <td>:

style="vertical-align:top"