css: testo allineato alla parte superiore e inferiore delle cellule

Question

Diciamo che ho il codice come questo:

<table> 
<tr> 
    <td> 
     <div id="top">top</div> 
     <div id="bot">bottom</div> 
    </td> 
</tr> 
</table> 

sto cercando di allineare #top alla parte superiore della cella e #bot verso il basso attraverso i CSS .

#top { vertical-align:top; } 
#bot { vertical-align:bottom; } 

Quanto sopra non sembra funzionare - non sembra proprio che abbia alcun effetto. Ecco un collegamento al codice: http://jsfiddle.net/vKPG8/28/

Eventuali spiegazioni sul motivo per cui questo sta accadendo e come potrebbe essere risolto?

Answer 1

vertical-align è per gli elementi in linea e div è un elemento di blocco. Prova con position: absolute e top: 0 e bottom: 0.

td { 
    position: relative; 
    width: 200px; 
    height: 100px; 
    border: solid 1px; 
} 

#top, #bot { position: absolute; } 
#top { top: 0; } 
#bot { bottom: 0; } 

Demo: http://jsbin.com/iyosac/1/edit
Controllare qui per ulteriori informazioni: http://css-tricks.com/what-is-vertical-align/

Answer 2

la soluzione accettata usando position: absolute non è una soluzione compatibile cross-browser per questo problema, come Firefox non lo fa (e secondo alla specifica non dovrebbe) consentire il posizionamento assoluto in celle o elementi di tabella con display: table-cell.

Non sembra essere un modo CSS-only veramente affidabile per risolvere questo problema, anche se ho un fix CSS-only che funziona per questo caso. Essenzialmente quello che ho fatto è inserire un elemento prima che è abbastanza alto per forzare la linea di fondo del testo alla fine poiché ha vertical-align: bottom set. Questo è essenzialmente lo stesso di mettere padding-top, quindi non è più una soluzione.

demo: http://jsfiddle.net/Be7BT/

td {width:200px;height:100px;border:solid 1px;} 
#top { 
    display: inline-block; 
    vertical-align:top; 
    width: 100%; 
} 
#bot { 
    display: inline-block; 
    vertical-align:bottom; 
    width: 100%; 
} 
#bot:before{ 
    content: ''; 
    display: inline-block; 
    height: 100px; 
} 

Answer 3

ho un'idea migliore, utilizzare tabella nidificata:

<table width="100px" height="100px" border=1> 
    <tr> 
     <td valign="top">top</td> 
    </tr> 
    <tr height=100%> 
     <td valign="bottom">bottom 
     </td> 
    </tr> 
</table> 

Answer 4

Il modo per farlo è con rowspan:

<table><tr> 
    <td rowspan=2>tall<br>tall<br>tall<br>tall<br> 
    <td valign="top">top</td> 
</tr><tr> 
    <td valign="bottom">bottom</td> 
</tr></table>