it-swarm-es.com

Cómo colocar texto en la esquina superior derecha o inferior derecha de un "cuadro" usando CSS

¿Cómo conseguiría que los here y and here estén a la derecha, en las mismas líneas que los lorem ipsums? Ver lo siguiente:

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>

Te acerca bastante, aunque es posible que necesites ajustar los valores "superior" e "inferior".

29
Garry Shutler

Haga flotar a la derecha el texto que desea que aparezca a la derecha y, en el marcado, asegúrese de que este texto y su espacio circundante ocurran antes del texto que debería estar a la izquierda. Si no ocurre primero, puede tener problemas con el texto flotante que aparece en una línea 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>

Tenga en cuenta que esto funciona para cualquier línea, no solo para las esquinas superior e inferior.

3
phloopy

Si la posición del elemento que contiene el Lorum Ipsum se establece como absoluta, puede especificar la posición mediante CSS. Los elementos "aquí" y "y aquí" tendrían que estar contenidos en un elemento de nivel de bloque. Usaré marcas como esta.

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

Aquí está el CSS para arriba.

 # lipsum {posición: absoluta; superior: 0; izquierda: 0;}/* ejemplo */
 # aquí {posición: absoluta; superior: 0; derecha: 0;} 
 # andhere {posición: absoluta; abajo: 0; derecha: 0;} 

Una vez más, lo anterior solo funciona (de manera confiable) si #lipsum se coloca a través de absoluto.

De lo contrario, deberá usar la propiedad float.

 # aquí, #andhere {float: right;} 

También deberá colocar su marcado en el lugar apropiado. Para una mejor presentación, sus dos divs probablemente necesitarán algo de relleno y márgenes para que el texto no se ejecute todo junto.

1
BrewinBombers

Debe poner "aquí" en un <div> o <span> con style="float: right".

0
AdamB

Es posible que pueda utilizar el posicionamiento absoluto.

La caja del contenedor debe establecerse en position: relative.

El texto superior derecho debe establecerse en position: absolute; top: 0; right: 0. El texto inferior derecho debe establecerse en position: absolute; bottom: 0; right: 0.

Deberá experimentar con padding para evitar que el contenido principal del cuadro se ejecute debajo de los elementos posicionados absolutos, ya que existen fuera del flujo normal del contenido del 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

Solo necesita flotar el elemento div a la derecha y darle un margen. Asegúrese de no usar "absoluto" para este caso.

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

O incluso mejor, use elementos HTML que se ajusten a sus necesidades. Es más limpio y produce un marcado más delgado. Ejemplo:

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

Haga flotar el em a la derecha (con display: block), o configúrelo en position: absolute con su padre como position: relative.

0
Bruce