imagen flotante del fluido sin envoltorio de texto

No hay razón para que esto sea difícil de lograr. De vuelta en el camino, podrías crear una tabla y poner la imagen en la primera celda y el texto en la segunda. Muy fácil.imagen flotante del fluido sin envoltorio de texto

Por alguna razón, me está costando muchísimo hacer que esto funcione con css, y sé css con bastante fluidez. Estoy seguro de que estoy pasando por alto una respuesta con suerte fácil.

Lo que estoy buscando lograr:

imagen

dinámico tamaño (ser tomado de la base de datos) flotó hacia la izquierda - Descripción del texto a la derecha con ajuste a continuación la imagen cuando llega a la altura de la imagen.

lo que no funcionará:

Configuración de un margen de la izquierda en el texto (ancho de la imagen no es coherente)
Configuración de un ancho/flotando justo en texto (de nuevo, ancho de la imagen es dinámico ancho de modo adecuado en el texto sería desconocida)

Ejemplo de código (css pre):

<div class="demo"> 
    <img src="dynamic_sized_image.jpg" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div>

¡Espero que haya una respuesta!

¡Gracias!

Fuente

2011-09-21 rkingon

Aquí es solución para su problema (p { overflow: hidden})

http://jsfiddle.net/simoncereska/BnQRW/

Fuente

2011-09-21 05:50:47 simoncereska

Holy Moly No puedo creer que sea tan fácil ... Sabía que me estaba perdiendo algo. Muchas gracias. Ojalá pudiera votar, pero necesito más puntos de rep. =/ – rkingon

Hola, me pregunto si podrías explicar por qué funciona. Realmente no tiene sentido ... heh – rkingon

Esto funciona, pero no permite que el texto se centre verticalmente en la imagen, o que la imagen se centre verticalmente en el texto (dependiendo de cuál sea más alto). Es una verdadera lástima que la única manera de centrar de manera confiable las cosas sea usando tablas. – cjbarth

No creo que esto sea posible con CSS puro porque tiene un atributo que es dinámico.

Use javascript para calcular el ancho de img, luego puede averiguar el ancho del texto (siempre que el contenedor #demo tenga un tamaño fijo). Establezca los anchos a través de js y use este css: http://jsfiddle.net/GcV3S/

Fuente

2011-09-21 05:32:58 marissajmc

overflow: hidden es la respuesta! No puedo creer que funcionó ... – rkingon

así que márcalo como respuesta correcta;) – simoncereska

La manera más fácil y mejor es simplemente establecer un tamaño de imagen fijo. Simplemente escala estos, esta voluntad es la mayoría de los casos mejorar el diseño y el aspecto de su sitio web. Si realmente necesita tener esto sin establecer un ancho fijo para el bloque de texto o bloque de imagen, realmente no sé una respuesta en este momento, lo siento.

La única forma en que puedo pensar en este momento es usar javascript para modificar el ancho del texto ... Sin embargo, es una pregunta interesante.

Fuente

2011-09-21 05:45:12 JNDPNT

Estaba debatiendo usar java - o incluso almacenar el ancho de la imagen en cms y luego proporcionar css en línea ... sin embargo, parece que hay una manera ... desbordamiento: oculto; en el texto. ¡funcionó! – rkingon

imagen flotante del fluido sin envoltorio de texto

Respuesta

Cuestiones relacionadas