Como colocar texto no canto superior direito ou inferior direito de uma “caixa” usando css
Pergunta
Como eu conseguiria o here
e and here
estar à direita, na mesma linha dos lorem ipsums?Veja o seguinte:
Lorem Ipsum etc........here
blah.......................
blah blah..................
blah.......................
lorem ipsums.......and here
Solução
<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>
Chega bem perto, embora possa ser necessário ajustar os valores "superior" e "inferior".
Outras dicas
Flutue para a direita o texto que deseja que apareça à direita e, na marcação, certifique-se de que esse texto e sua extensão circundante ocorram antes do texto que deveria estar à esquerda.Se isso não ocorrer primeiro, você poderá ter problemas com o texto flutuante aparecendo 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 para os cantos superior e inferior.
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.Usarei marcação 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 acima.
#lipsum {position:absolute;top:0;left:0;} /* example */ #here {position:absolute;top:0;right:0;} #andhere {position:absolute;bottom:0;right:0;}
Novamente, o procedimento acima só funciona (de forma confiável) se #lipsum estiver posicionado via absoluto.
Caso contrário, você precisará usar a propriedade float.
#here, #andhere {float:right;}
Você também precisará colocar sua marcação no local apropriado.Para uma melhor apresentação, seus dois divs provavelmente precisarão de preenchimento e margens para que o texto não fique todo junto.
<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>
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 o em
para a direita (com display: block
) ou configure-o para position: absolute
com seu pai como position: relative
.
Você precisa colocar "aqui" em um <div>
ou <span>
com style="float: right"
.
A primeira linha consistiria em 3 <div>
S.Um externo que contém dois internos <div>
S.O primeiro interior <div>
teria float:left
o que garantiria que permanecesse à esquerda, o segundo teria float:right
, o 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 embutido não é a melhor ideia - mas você entendeu.
2,3 e 4 seriam solteiros <div>
S.
5 funcionaria como 1.
Você pode usar o posicionamento absoluto.
A caixa do contêiner deve ser configurada para 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 padding
para impedir que o conteúdo principal da caixa seja executado abaixo dos elementos posicionados de forma absoluta, pois eles existem fora do fluxo normal do conteúdo do texto.
Você só precisa flutuar o elemento div para a direita e dar-lhe uma margem.Certifique-se de não usar "absoluto" neste caso.
#date {
margin-right:5px;
position:relative;
float:right;
}