Выравнивание по нижнему краю

dimych · January 23, 2009

Всем привет!

Подскажите, плз, как с помощью слоев раилизовать следующее:

<table border="0">
  <tr>
	<td align="right" valign="bottom"><img src="icon.gif" alt="12" /></td>
	<td align="left" valign="bottom">Такое объявление, прогнозирует The Times, вскоре появится на сайте NASA</td>
  </tr> 
</table>

т.е., чтобы и картинка и текст были всегда выравнены по низу независимо от кол-ва текста.

Vlad · January 24, 2009

vertical-align: bottom;

Добавь эту строку к стилю ячейки.

dimych · January 24, 2009

vertical-align: bottom;
Добавь эту строку к стилю ячейки.

Имеется в виду, избавиться от таблицы и сделать все слоями...

Vlad · January 24, 2009

С выравниванием по низу у слоев большие проблемы. Так что в данном случае оптимальнее таблицей будет сделать.

ps1 · February 3, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

div.main {

position: relative; background: #ccc; width: 400px; height: 600px;

}

div.main div.bottom {

background: #33C;

}

div.main div.bottom_left {

position:absolute; bottom:0; width: 200px; background: #1CC;

}

div.main div.bottom_right {

position:absolute; bottom:0; width: 200px; margin-left: 200px; background: red;

}

</style>

</head>

<body>

</div>

</body>

</html>

SelenIT · February 4, 2009

Еще можно через display:inline-block + vertical-align:bottom (или baseline) выравнять. Правда, для IE6-7 и FF2- понадобятся хаки (недавно про это было много статей, в частности, на хабрахабре). И нужно учитывать, что пробелы между тегами при такой раскладке значимы.

Edited February 4, 2009 by SelenIT

Sign In

Выравнивание по нижнему краю

Question

dimych

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

dimych

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

ps1

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information