css: tekst wyrównany do góry i na dole komórki

Question

Powiedzmy mam kod jak poniżej:

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

próbuję wyrównać #Top do górnej części komórki i #bot do dołu poprzez CSS .

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

Powyższe wydaje się nie działać - to naprawdę nie wydaje się mieć żadnego wpływu w ogóle. Oto link do kodu: http://jsfiddle.net/vKPG8/28/

Jakiekolwiek wyjaśnienie, dlaczego tak się dzieje i jak można to naprawić?

Answer 1

vertical-align jest dla elementów śródliniowych, a div jest elementem blokowym. Wypróbuj z position: absolute i top: 0 i 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
Sprawdź tutaj Więcej informacji: http://css-tricks.com/what-is-vertical-align/

Answer 2

przyjętego rozwiązania za pomocą position: absolute nie jest kompatybilny cross-browser rozwiązanie tego problemu, jak Firefox nie robi (a według specyfikacja nie powinna) zezwalać na bezwzględne pozycjonowanie w komórkach tabeli lub elementach z wyświetlaczem: tabela-komórka.

Wydaje się, że nie jest to naprawdę niezawodny sposób rozwiązania tego problemu tylko w języku css, chociaż mam tylko poprawkę css, która działa w tym przypadku. Zasadniczo to, co zrobiłem, to wstawienie elementu przedniego, który jest wystarczająco duży, aby wymusić dolny wiersz tekstu na dole, ponieważ ma on pionowe wyrównanie: zestaw dolny. Zasadniczo jest to to samo, co nakładanie podkładki, więc nie stanowi to większego problemu.

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

Mam lepszy pomysł, użyj zagnieżdżonego tabeli:

<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

Sposobem na to jest z 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>