it-swarm-ru.tech

Как поместить текст в верхнем правом или нижнем правом углу "коробки" с помощью CSS

Как бы получить here и and here справа, на тех же строках, что и lorem ipsums? Смотрите следующее:

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
13
Corey Trager

<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>

Приближает вас довольно близко, хотя вам может понадобиться настроить значения "top" и "bottom".

29
Garry Shutler

Переместите справа текст, который вы хотите отобразить справа, и в разметке убедитесь, что этот текст и окружающий его интервал находятся перед текстом, который должен быть слева. Если это не произойдет первым, у вас могут возникнуть проблемы с отображением всплывающего текста в другой строке.

<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>

Обратите внимание, что это работает для любой линии, а не только для верхнего и нижнего углов.

3
phloopy

Если позиция элемента, содержащего 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;}/* пример */
 # здесь {position: absolute; top: 0; справа: 0;} 
 # andhere {position : абсолютная; внизу: 0; правая: 0;} 

Опять же, вышеупомянутое работает (надежно) только если #lipsum позиционируется через абсолютный.

Если нет, вам нужно использовать свойство float.

 # здесь, #andhere {float: right;} 

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

1
BrewinBombers

Первая строка будет состоять из 3 <div>s. Один внешний, который содержит два внутренних <div>s. Первый внутренний <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>s.

5 будет работать как 1.

0
user1151

Вы должны поместить «здесь» в <div> или <span> с style="float: right".

0
AdamB

Вы можете использовать абсолютное позиционирование.

Поле контейнера должно быть установлено на position: relative.

Правый верхний текст должен быть установлен на position: absolute; top: 0; right: 0. Правый нижний текст должен быть установлен на position: absolute; bottom: 0; right: 0.

Вам нужно будет поэкспериментировать с padding, чтобы не дать основному содержимому блока работать под элементами с абсолютным позиционированием, так как они существуют вне нормального потока текстового содержимого.

0
ceejayoz
<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>
0
Loren Segal

Вам нужно только переместить элемент div вправо и дать ему поле. Убедитесь, что не используете «абсолют» для этого случая.

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
0
trillions

Или даже лучше, используйте 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.

0
Bruce