Как поместить текст в верхнем правом или нижнем правом углу «коробки» с помощью CSS - PullRequest
Новая
       24

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

14 голосов
/ 15 сентября 2008

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

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here

Ответы [ 9 ]

30 голосов
/ 15 сентября 2008 

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

3 голосов
/ 15 сентября 2008

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

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

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

1 голос
/ 15 сентября 2008

Если положение элемента, содержащего 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, вероятно, понадобятся отступы и поля, чтобы текст не работал вместе.

0 голосов
/ 25 марта 2012

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

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
0 голосов
/ 15 сентября 2008

Или даже лучше, используйте 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 голосов
/ 15 сентября 2008 
<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 голосов
/ 15 сентября 2008

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

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

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

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

0 голосов
/ 15 сентября 2008

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

0 голосов
/ 15 сентября 2008

Первая строка будет состоять из 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.

...