Как поместить текст в верхний правый угол или правый нижний угол “поля” с помощью CSS
Многие объяснения уже присутствуют, чтобы объяснить, как это происходит и как это исправить, но вы также должны следовать рекомендациям, чтобы избежать NullPointerException вообще.
См. также: A хороший список лучших практик
Я бы добавил, очень важно, хорошо использовать модификатор final. Использование "окончательной" модификатор, когда это применимо в Java
Сводка:
- Используйте модификатор
finalдля обеспечения хорошей инициализации. - Избегайте возврата null в методы, например, при возврате пустых коллекций.
- Использовать аннотации
@NotNullи@Nullable - Быстрое завершение работы и использование утверждений, чтобы избежать распространения нулевых объектов через все приложение, когда они не должен быть пустым.
- Сначала используйте значения с известным объектом:
if("knownObject".equals(unknownObject) - Предпочитают
valueOf()поверх toString (). - Используйте null safe
StringUtilsStringUtils.isEmpty(null).
8 ответов
<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 расположен через абсолют.
В противном случае необходимо будет использовать свойство плавающее.
#here, #andhere {float:right;}
необходимо будет также положить разметку на соответствующее место. Для лучшей презентации Вашим двум отделениям, вероятно, будут нужны некоторое дополнение и поля так, чтобы текст все не работал вместе.
<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, чтобы мешать основному содержанию поля работать под абсолютными расположенными элементами, поскольку они существуют вне нормального потока текстового содержания.