Как установить «абсолютное текстовое основание», чтобы дополнительный текст расширялся вверх? - PullRequest
Новая
       6

Как установить «абсолютное текстовое основание», чтобы дополнительный текст расширялся вверх?

0 голосов
/ 21 июня 2010

Это сложно объяснить, поэтому я сделаю все возможное:

Я хочу, чтобы текстовое содержимое было прикреплено к нижней части элемента div, чтобы независимо от длины содержимого оно всегда было установлено в нижней части.

Так что, если бы у меня было:

ГОЛОВКА
Содержание 1
содержание 2

Контент 2 будет выстроен примерно в 20 пикселей от нижней части родительского элемента div, и если бы у меня было:

ГОЛОВКА
содержание 1

Контент 1 будет располагаться на расстоянии около 20 пикселей от нижней части родительского элемента div, даже если его содержание меньше.

Можно ли это сделать динамически без таблиц?

Ответы [ 3 ]

4 голосов
/ 21 июня 2010

Да, просто оберните header и content в один div, например: 

<div id="parent">
  <div class="to_bottom">
    <h1>Header</h1>
    <p>Content 1</p>
    <p>Content 2</p>
  </div>
</div>

Тогда используйте этот CSS: 

#parent { position: relative }
.to_bottom { 
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
}

Дополнительная информация: Абсолютное позиционирование может быть относительно любой стороны: сверху, слева, снизу, справа. Или комбинация.

Итак: bottom: 0; right: 0 привязывает направо и низ, но не сверху и не левее. В основном это становится: bottom: 0; right: 0; top: auto; left: auto.

Аналогичным образом, используя bottom: 20px; left: 0, якорь прикрепляется к левому нижнему углу, на 20 пикселей выше от нижнего.

0 голосов
/ 21 июня 2010

Кажется, я столкнулся с подобной проблемой, требующей выравнивания чего-либо по низу элемента div независимо от высоты содержимого над ним. Выполняя некоторые поиски, я могу найти плагин для пользовательского интерфейса jQuery и сейчас только начинаю смотреть на него ... может быть, вам тоже кое-что поможет.

0 голосов
/ 21 июня 2010 
<div>
  <div id="header" style="position: absolute; top: 0px; left:0px; right: 0px; height:105px;">
  </div>
  <div id="content" style="position: absolute; top: 105px; left:0px; right: 0px; bottom: 20px; height:105px;"> 
  </div>
  <div id="footer" style="position: absolute; bottom: 0px; left: 0px; right: 0px; height: 20px;">
  </div>
</div>

Надеюсь, это даст вам представление ...

...