Как разместить текст в правом верхнем или нижнем правом углу «поля» с помощью CSS
Ответы 9
Первая линия будет состоять из 3 <div>. Один внешний, содержащий два внутренних <div>. Первый внутренний <div> будет иметь float:left, который будет следить за тем, чтобы он оставался слева, а второй - float:right, который прикрепит его вправо.
<div style = "width:500;height:50"><br>
<div style = "float:left" >stuff </div><br>
<div style = "float:right" >stuff </div>
... очевидно, что встроенный стиль - не лучшая идея, но суть вы поняли.
2,3 и 4 будут одиночными <div>.
5 будет работать как 1.
Вам нужно ввести «здесь» в <div> или <span> с style = "float: right".
Возможно, вы сможете использовать абсолютное позиционирование.
Коробка контейнера должна быть установлена на position: relative.
Правый верхний текст должен быть установлен на position: absolute; top: 0; right: 0.
Нижний правый текст должен быть установлен на position: absolute; bottom: 0; right: 0.
Вам нужно будет поэкспериментировать с padding, чтобы предотвратить запуск основного содержимого блока под элементами с абсолютным позиционированием, поскольку они существуют вне обычного потока текстового содержимого.
<div style = "position: relative; width: 250px;">
<div style = "position: absolute; top: 0; right: 0; width: 100px; text-align:right;">
here
</div>
<div style = "position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;">
and here
</div>
Lorem Ipsum etc <br />
blah <br />
blah blah <br />
blah <br />
lorem ipsums
</div>Довольно близко, хотя вам может потребоваться настроить «верхнее» и «нижнее» значения.
<style>
#content { width: 300px; height: 300px; border: 1px solid black; position: relative; }
.topright { position: absolute; top: 5px; right: 5px; text-align: right; }
.bottomright { position: absolute; bottom: 5px; right: 5px; text-align: right; }
</style>
<div id = "content">
<div class = "topright">here</div>
<div class = "bottomright">and here</div>
Lorem ipsum etc................
</div>
Если позиция элемента, содержащего Lorum Ipsum, установлена как абсолютная, вы можете указать позицию через CSS. Элементы «здесь» и «и здесь» должны содержаться в элементе уровня блока. Я буду использовать такую разметку.
print("<div id = "lipsum">");
print("<div id = "here">");
print(" here");
print("</div>");
print("<div id = "andhere">");
print("and here");
print("</div>");
print("blah");
print("</div>");
Вот CSS для выше.
#lipsum {position:absolute;top:0;left:0;} /* example */
#here {position:absolute;top:0;right:0;}
#andhere {position:absolute;bottom:0;right:0;}
Опять же, вышеуказанное работает (надежно) только в том случае, если #lipsum позиционируется через absolute.
Если нет, вам нужно использовать свойство float.
#here, #andhere {float:right;}
Вам также нужно будет разместить разметку в соответствующем месте. Для лучшего представления вашим двум div, вероятно, потребуются некоторые отступы и поля, чтобы текст не работал вместе.
Или, что еще лучше, используйте элементы HTML, которые соответствуют вашим потребностям. Это чище и дает более компактную разметку. Пример:
<dl>
<dt>Lorem Ipsum etc <em>here</em></dt>
<dd>blah</dd>
<dd>blah blah</dd>
<dd>blah</dd>
<dt>lorem ipsums <em>and here</em></dt>
</dl>
Переместите em вправо (с display: block) или установите position: absolute с родительским элементом как position: relative.
Переместите вправо текст, который вы хотите отобразить справа, и в разметке убедитесь, что этот текст и окружающий его диапазон располагаются перед текстом, который должен быть слева. Если это не произойдет раньше, у вас могут возникнуть проблемы с отображением плавающего текста в другой строке.
<html>
<body>
<div>
<span style = "float:right">here</span>Lorem Ipsum etc<br/>
blah<br/>
blah blah<br/>
blah<br/>
<span style = "float:right">and here</span>lorem ipsums<br/>
</div>
</body>
</html>
Обратите внимание, что это работает для любой линии, а не только для верхнего и нижнего углов.
В каком браузере? У меня это отлично сработало в трех основных, если сначала у вас есть плавающий текст. Абсолютное позиционирование, безусловно, сработает, если вы заботитесь только об углах поля, но это позволяет вам перемещать текст на произвольных строках полностью вправо.
Вам нужно только переместить элемент div вправо и дать ему запас. Убедитесь, что в этом случае не используйте "absolute".
#date {
margin-right:5px;
position:relative;
float:right;
}
Но «и здесь» появляется в новой строке, а не в той же строке, что и заключительное «бла».