¿Cómo obtendré el here y el and here a la derecha, en la misma línea que los lorem ipsums? Ver la siguiente:Cómo poner el texto en la esquina superior derecha o inferior derecha de una "caja" usando css
Lorem Ipsum etc........here
blah.......................
blah blah..................
blah.......................
lorem ipsums.......and here
<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>le consigue bastante cerca, aunque es posible que tenga que modificar el "top" y los valores de "fondo".
La primera línea consistiría en 3 <div> s. Una exterior que contiene dos interiores <div> s. El primer interior <div> tendría float:left que aseguraría que permanezca a la izquierda, el segundo tendría float:right, que lo pegaría a la derecha.
<div style="width:500;height:50"><br>
<div style="float:left" >stuff </div><br>
<div style="float:right" >stuff </div>
... obviamente, el estilo en línea no es la mejor idea, pero entiendes el punto.
2,3 y 4 serían simples <div> s.
5 funcionaría como 1.
Es necesario poner "aquí" en un <div> o <span> con style="float: right".
Es posible que pueda utilizar la posición absoluta.
La caja del contenedor debe establecerse en position: relative.
El texto de la parte superior derecha debe establecerse en position: absolute; top: 0; right: 0. El texto de abajo a la derecha debe establecerse en position: absolute; bottom: 0; right: 0.
Deberá experimentar con padding para evitar que el contenido principal de la casilla se ejecute debajo de los elementos de posición absoluta, ya que existen fuera del flujo normal de los contenidos de texto.
<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>
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í" deberían estar contenidos en un elemento de nivel de bloque. Usaré marcado como este.
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 de arriba.
#lipsum {position:absolute;top:0;left:0;} /* example */
#here {position:absolute;top:0;right:0;}
#andhere {position:absolute;bottom:0;right:0;}
Una vez más, lo anterior solo funciona (de manera confiable) si #lipsum se coloca a través de absoluta.
De lo contrario, deberá usar la propiedad flotante.
#here, #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.
O mejor aún, utilice elementos HTML que se ajusten a sus necesidades. Es más limpio y produce marcas más delgadas.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>
flotar el em a la derecha (con display: block), o se establece en position: absolute con su matriz como position: relative.
Flote el texto que desea que aparezca a la derecha, y en la marca de verificación, asegúrese de que este texto y su extensión se produzca antes que el texto que debe 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 en las esquinas superior e inferior.
Solo necesita flotar el elemento div a la derecha y darle un margen. Asegúrate de no usar "absoluto" para este caso.
#date {
margin-right:5px;
position:relative;
float:right;
}
Pero el que aparezca "y aquí" en una nueva línea, en lugar de la misma línea que la final "bla" –
En qué navegador? Me funcionó bien en los tres principales, siempre y cuando tengas primero el texto flotante. Sin duda, el posicionamiento absoluto funcionará si solo te importan las esquinas de la caja, pero esto te permite hacer flotar texto en líneas arbitrarias hasta la derecha. – phloopy