it-swarm-pt.tech

Como colocar o texto no canto superior direito ou no canto inferior direito de uma "caixa" usando css

Como eu obteria o here e and here para estar à direita, nas mesmas linhas que os ipsums lorem? Veja o seguinte:

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>

Fica muito perto, embora você possa precisar ajustar os valores "top" e "bottom".

29
Garry Shutler

Flutue para a direita o texto que você deseja que apareça à direita e, na marcação, certifique-se de que este texto e seu intervalo circundante ocorram antes do texto que deveria estar à esquerda. Se isso não ocorrer primeiro, você pode ter problemas com o texto flutuante que aparece em uma linha diferente.

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

Observe que isso funciona para qualquer linha, não apenas os cantos superior e inferior.

3
phloopy

Se a posição do elemento que contém o Lorum Ipsum for definida como absoluta, você poderá especificar a posição via CSS. Os elementos "aqui" e "e aqui" precisariam estar contidos em um elemento de nível de bloco. Vou usar marcações assim.

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>");

Aqui está o CSS para acima.

 # lipsum {posição: absoluta; topo: 0; esquerda: 0;}/* exemplo */
 # aqui {posição: absoluta; topo: 0; direita: 0;} 
 # andhere {posição: absoluta; inferior: 0; direita: 0;} 

Novamente, o acima só funciona (confiavelmente) se #lipsum estiver posicionado via absoluto.

Caso contrário, você precisará usar a propriedade float.

 # aqui, #andhere {float: right;} 

Você também precisará colocar sua marcação no lugar apropriado. Para uma melhor apresentação, seus dois divs provavelmente precisarão de alguns preenchimentos e margens para que o texto não seja executado em conjunto.

1
BrewinBombers

A primeira linha consistiria em 3 <div>s. Um exterior que contém dois <div>s internos. O primeiro <div> interno teria float:left que garantiria que ficasse à esquerda, o segundo teria float:right, que o colocaria à direita.

<div style="width:500;height:50"><br>
<div style="float:left" >stuff </div><br>
<div style="float:right" >stuff </div>

... obviamente, o estilo inline não é a melhor ideia - mas você entendeu.

2,3 e 4 seria único <div>s.

5 funcionaria como 1.

0
user1151

Você precisa colocar "aqui" em um <div> ou <span> com style="float: right".

0
AdamB

Você pode usar o posicionamento absoluto.

A caixa do contêiner deve ser definida como position: relative.

O texto no canto superior direito deve ser definido como position: absolute; top: 0; right: 0. O texto no canto inferior direito deve ser definido como position: absolute; bottom: 0; right: 0.

Você precisará experimentar com padding para impedir que o conteúdo principal da caixa seja executado sob os elementos posicionados de forma absoluta, pois eles existem fora do fluxo normal do conteúdo do texto.

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

Você só precisa flutuar o elemento div para a direita e dar uma margem. Certifique-se de não usar "absoluto" para este caso.

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

Ou melhor ainda, use elementos HTML que atendam às suas necessidades. É mais limpo e produz uma marcação mais enxuta. Exemplo:

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

Flutue a em para a direita (com display: block) ou defina para position: absolute com seu pai como position: relative.

0
Bruce