Cómo poner el texto en la parte superior derecha o la esquina inferior derecha de una "caja" con css

StackOverflow https://stackoverflow.com/questions/65536

  •  09-06-2019
  •  | 
  •  

Pregunta

¿Cómo hago para conseguir el here y and here para estar en la derecha, en la misma línea como el lorem ipsums?Consulte la siguiente:

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
¿Fue útil?

Solución 

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

Consigue bastante cerca, aunque puede que necesite ajustar el "arriba" y "abajo" de los valores.

Otros consejos

Flotar a la derecha el texto que desea que aparezca en el derecho, y en el marcado asegúrese de que este texto y sus alrededores lapso se produce antes de que el texto que debe estar a la izquierda.Si no se produzca en primer lugar, usted puede tener problemas con la flotaba el texto 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 sólo en las esquinas superior e inferior.

Si la posición del elemento que contiene el Lorum Ipsum es establecer absoluta, puede especificar la posición a través de CSS.El "aquí" y "y aquí" elementos tendría que ser contenida en un elemento de nivel de bloque.Voy a utilizar etiquetas 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 {position:absolute;top:0;left:0;} /* example */
#here {position:absolute;top:0;right:0;}
#andhere {position:absolute;bottom:0;right:0;}

De nuevo, el anterior solo funciona (fiable) si #lipsum se coloca a través de la absoluta.

Si no, tendrás que usar el flotador de la propiedad.

#here, #andhere {float:right;}

Usted también tendrá que poner sus marcas en el lugar apropiado.Para una mejor presentación, sus dos divs probablemente tendrá algunos relleno y los márgenes para que el texto no todas juntas.

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

O mejor aún, utilizar elementos de HTML que se ajuste a sus necesidades.Es más limpio, y produce más delgado marcado.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>

Flotador de la em a la derecha (con display: block), o a position: absolute con su padre como position: relative.

Usted necesita para poner el "aquí" en un <div> o <span> con style="float: right".

La primera línea consiste de 3 <div>s.Uno exterior que contiene dos interior <div>s.El primer interior <div> habría float:left que iba a asegurarse de que permanece a la izquierda, la segunda tendría float:right, que se adhieren a la derecha.

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

...obviamente la línea de estilo no es la mejor idea - pero usted consigue el punto.

2,3, y 4 sería único <div>s.

5 funcionaría como 1.

Usted puede ser capaz de utilizar el posicionamiento absoluto.

El cuadro contenedor debe ser ajustado a position: relative.

La parte superior-derecha de texto debe ser ajustado a position: absolute; top: 0; right: 0.La parte inferior-derecha de texto debe ser ajustado a position: absolute; bottom: 0; right: 0.

Se necesita experimentar con padding para detener el principal contenido de la caja de correr por debajo de la de los elementos con posición absoluta, ya que existen fuera del flujo normal de los contenidos de texto.

Usted sólo necesita hacer flotar el elemento div a la derecha y darle un margen.Asegúrese de no utilizar "absoluta" para este caso.

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top