una texto poner parte otro inferior imagen esquina div derecha dentro debajo como alinear abajo html css css-float

html - poner - ¿Cómo puedo ajustar el texto alrededor de una div inferior derecha?



alinear texto html (7)

Además de la solución publicada, utilicé un truco rápido de JQuery para ajustar dinámicamente la altura del empujador, al tomar la altura del área que deseaba hacia abajo, alinearla a la derecha desde la altura del área de contenido y aplicarla a el div empujador, como tal:

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + ''px'')

¡Necesita algunos pequeños retoques, pero en general funciona tan bien como lo va a conseguir!

Cada vez que intento hacer algo aparentemente simple en CSS, no funciona.

Tengo un contenido div que contiene una imagen 460x160. Todo lo que quiero hacer es colocar la imagen en la esquina inferior derecha y envolver mi texto alrededor de ella.

<div id="contents"> <img src="..." /> text text text text text text ... </div>

Entonces quiero que se vea así:

------------------ | text text text | | text text text | | text text -----| | text text | | ------------------

Hacerlo con una imagen superior izquierda o superior derecha es torta:

#contents img { float:right; } ------------------ | text text | | | text text -----| | text text text | | text text text | ------------------

¿Ahora cómo empujo eso al fondo? Lo mejor que he encontrado hasta ahora son:

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px ------------------ | text text | | text text | | text text -----| | text text | | ------------------

En este caso, el texto no se imprime en el margen, por lo que hay un espacio en blanco sobre la imagen.

#contents { position:relative; } #contents img { position:absolute; right:0; bottom:0; } -or- // move the img tag under the text in the html and: #contents img { float:right; margin-top:-160; } ------------------ | text text text | | text text text | | text text -----| | text text | te | ------------------

En este caso, el texto se imprime sobre o debajo de la imagen.

Entonces ... ¿cómo puedo lograr esto?

Bueno ... esta es una publicación bastante antigua, pero luché y salí con esto con una pequeña solución. Necesitaba tener una imagen alineada a la derecha, y exactamente 170px desde la parte superior. Y necesita texto para fluir en la parte superior, izquierda e inferior de la imagen. Entonces lo que hice fue crear un que sea de 0px de ancho, con 170px de altura y flotar a la derecha. ¡Entonces el img flotaría y despejaría a la derecha y voila!

<!-- I used CSS, but inline will serve well here --> <div style="float: right; width: 0px; height: 170px"></div> <div style="float: right; clear: right"><img src="..." /></div> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Funcionó bastante bien :)

De acuerdo. Así que en realidad tuve este mismo problema y en algún momento la respuesta me golpeó como el pastel de queso del sábado por la noche. Es casi el mismo efecto al azar que tiene cuando intenta establecer el ajuste de texto en Word.

img.right { float: right; }

Ahora todo lo que tiene que hacer es simplemente configurarlo DENTRO del texto donde desea que se rompan las líneas. El texto flotará hasta el final del texto, por lo que siempre empujará el texto hacia la izquierda, pero si coloca la imagen en el medio del texto, como ...

<p>This is some text <img src="example.jpg" class="right" /> and then add some more text.</p>

la parte superior permanece donde está y el texto puede flotar libremente sobre la imagen y el resto se desplaza hacia la izquierda de la imagen. Es una solución, pero no tan tediosa como usar JS, y si usas un editor WYSIWYG es aún más fácil. Ahora que lo pienso, si usas un editor WYSIWYG, tiene esa función automáticamente. : P Problema resuelto.

Aclamaciones.

La solución más simple que encontré es ajustar img dentro de un elemento div y luego usar valores de relleno y margen inferior para alinearlo.

Este es mi CSS

.contentDiv .bottomRight img{ height: 130px; float:right; padding-top: 60px; margin-bottom: -10px; }

y aquí está el HTML

<div class="contentDiv"> <h1>If you are seeing this and reading it, then all is working well.</h1> <div class="bottomRight"> <img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="> </div> </div>

La razón por la que el relleno y el margen me funcionaron es porque la uso dentro del elemento padre "contentDiv" para ajustar automáticamente la altura del div de acuerdo con el contenido. No estoy seguro si es de algún uso.

La solución que encontré implica que tienes un div cuyo ancho no cambia, ni tampoco la cantidad de texto. Luego puede colocar la imagen dentro del texto y alinearla = derecha. Entonces, si tienes la cantidad correcta de texto a su alrededor, entonces obtienes la imagen a la derecha y en la parte inferior de la div.

<style > #contents{ border: 2px solid red; background: #ddd; position: absolute; width:600px; } </style> <div id="contents"> text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... <img src="http://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/> text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... hey hey text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... </div>

Seguramente parece haberse preguntado antes (2003) , y antes (2002) , o antes (2005)

El último enlace en realidad sugiere una solución basada en JavaScript , pero para una solución fija (es decir, no fluida).

Sin embargo, es consistente, con otros consejos encontrados

La única forma de hacerlo es colocar el elemento flotante en algún lugar en el medio del texto. Es imposible hacerlo perfecto todo el tiempo.

O este :

Consiste en flotar un elemento vertical "empujador" (como img, pero probablemente sea más inteligente simplemente usar un div vacío), y luego flotar el objeto deseado debajo de él, usando la propiedad clear. El principal problema con este método es que todavía debe saber cuántas líneas hay de texto. Sin embargo, hace las cosas MUCHO más fáciles, y definitivamente podría estar codificado con javascript, solo necesita cambiar la altura del "empujador" a la altura del contenedor menos la altura del flotador (suponiendo que el contenedor no es fijo / altura mínima) .

De todos modos, como se discutió en este hilo , no hay una solución fácil ...

cletus menciona en los comentarios este hilo de 2003 , que afirma una vez más el hecho de que no se puede lograr fácilmente.
Sin embargo, se refiere a este artículo de Eric Meyer , que se acerca al efecto que desea lograr.

Al comprender cómo se relacionan los flotadores y el flujo normal, y cómo se puede utilizar la limpieza para manipular el flujo normal alrededor de los flotadores, los autores pueden emplear flotadores como una herramienta de diseño muy poderosa.
Debido a que los flotadores originalmente no estaban destinados a ser utilizados para el diseño, algunos hacks pueden ser necesarios para que se comporten según lo previsto. Esto puede involucrar elementos flotantes que contienen flotadores, elementos de "limpieza" o una combinación de ambos.