css: текст выровнен по верхней и нижней части ячейки

скажем, у меня есть такой код :

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

Я пытаюсь выровнять #top к верхней части ячейки и #bot к нижней через CSS.

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

вышеизложенное, похоже, не работает - на самом деле это не имеет никакого эффекта вообще. Вот ссылка на код:http://jsfiddle.net/vKPG8/28/

каких-либо объяснений о том, почему это происходит и как это можно исправить?

6
css table

4 ответов

vertical-align для встроенных элементов и div является блочным элементом. Попробуйте с position: absolute и top: 0 и bottom: 0.

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

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

демо:http://jsbin.com/iyosac/1/edit
Проверьте здесь для получения дополнительной информации: http://css-tricks.com/what-is-vertical-align/

4

принятое решение с использованием position: absolute не является кросс-браузерным совместимым решением для этой проблемы, поскольку Firefox не позволяет (и в соответствии со спецификацией не должен) абсолютное позиционирование в ячейках таблицы или элементах с дисплеем:table-cell.

Кажется, что нет действительно надежного css-единственного способа решения этой проблемы, хотя у меня есть CSS-единственное исправление, которое работает для этого случая. По сути, то, что я сделал, - это вставить элемент before, который достаточно высок, чтобы заставить дно строка текста внизу, так как она имеет вертикальное выравнивание: Нижний набор. Это, по сути, то же самое, что положить обивку сверху, поэтому это не так много решения.

демо: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;
}
7

У меня есть лучшая идея, используйте вложенную таблицу:

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

способ сделать это с 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>
1