Как предотвратить наложение текста на выровненный снизу элемент DIV - PullRequest
5 голосов
/ 25 марта 2012

Когда я пытаюсь выровнять текст снизу в элементе DIV, я сталкиваюсь с проблемой, что, когда текст выше достаточно длинный, чтобы достичь нижней части элемента DIV, он перекрывается с текстом, выровненным снизу.Вот код: http://jsfiddle.net/Kw758/

<html>
<head>
<title>Date</title>
<style type="text/css">
#container {
  position: relative;
  border: 1px solid gray;
  width: 200px;
}

#date {
  margin-top: 1em;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
</style>
</head>
<body>
<div id="container">
    <span>
    This is a very very long text that might overlap with the date
    just below this.
    </span>
    <div id="date">
    January 1, 2012
    </div>
</div>
</body>
</html>

Как я могу предотвратить наложение текста в элементе SPAN и текста в элементе DIV?

Причина, по которой я выравниваю снизуэто с атрибутом 'position' вместо просто установки даты на 'float: right', потому что в моей реальной задаче DIV должен иметь минимальную высоту, поэтому нижняя граница элемента DIV может быть очень далекоиз текста в элементе SPAN.

1 Ответ

1 голос
/ 25 марта 2012

Разве не достаточно установить нижний отступ для #container?

#container {
  position: relative;
  border: 1px solid gray;
  width: 200px;
  padding-bottom: 30px; /* depending on font-size of span */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...