Как поместить текст в правый верхний или нижний правый угол «коробки» с помощью CSS
Вопрос
Как бы я получил here
и and here
быть справа, на той же линии, что и lorem ipsums?См. следующее:
Lorem Ipsum etc........here
blah.......................
blah blah..................
blah.......................
lorem ipsums.......and here
Решение
<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>
Получается довольно близко, хотя вам, возможно, придется настроить «верхнее» и «нижнее» значения.
Другие советы
Переместите вправо текст, который должен отображаться справа, и убедитесь, что в разметке этот текст и окружающий его диапазон находятся перед текстом, который должен быть слева.Если этого не произойдет раньше, у вас могут возникнуть проблемы с появлением плавающего текста на другой строке.
<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>
Обратите внимание, что это работает для любой линии, а не только для верхнего и нижнего углов.
Если позиция элемента, содержащего 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 позиционируется через абсолютное значение.
Если нет, вам нужно будет использовать свойство float.
#here, #andhere {float:right;}
Вам также необходимо будет разместить разметку в соответствующем месте.Для лучшего представления вашим двум элементам 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>
Или, что еще лучше, используйте элементы 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
.
Вам нужно поставить «здесь» в <div>
или <span>
с style="float: right"
.
Первая строка будет состоять из 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.
Возможно, вы сможете использовать абсолютное позиционирование.
Контейнерный ящик должен быть установлен на position: relative
.
Верхний правый текст должен быть установлен на position: absolute; top: 0; right: 0
.В правом нижнем углу должен быть установлен текст position: absolute; bottom: 0; right: 0
.
Вам нужно будет поэкспериментировать с padding
чтобы предотвратить перемещение основного содержимого поля под элементами с абсолютным позиционированием, поскольку они существуют вне обычного потока текстового содержимого.
Вам нужно всего лишь переместить элемент div вправо и задать ему запас.Убедитесь, что в этом случае не используйте «абсолютное».
#date {
margin-right:5px;
position:relative;
float:right;
}