CSS - div ancho, dependiendo del tamaño de las imágenes anteriores

<html><head> 
 
    <title></title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <style type="text/css"> 
 

 
    .box {background:gray;border:3px solid black;float:left;} 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    
 
<div class="box"> 
 
    <img src="http://i.stack.imgur.com/shWOu.jpg"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis ante ac sapien pellentesque vitae condimentum odio euismod. In purus nibh, ullamcorper in suscipit non, scelerisque eget sem. </p> 
 
</div> 
 
</body></html>

Como se puede ver ahora, la caja con el borde negro tiene un ancho automático que se ajusta al contenido en su interior. El problema es que quiero que el tamaño de la caja se ajuste al ancho de la imagen. Entonces, si la imagen tiene un ancho como en el ejemplo (el recuadro rojo), el texto debajo debe detenerse en la marca de puntos azules y bajar a una nueva línea.

¿Pero cómo puedo hacer eso?

Fuente

2011-03-30 donpedroper

¿Cuál es su HTML y CSS existentes? – BoltClock

Ahí va: http://pastehtml.com/view/1duy9p9.html – donpedroper

¿Va a crear dinámicamente el contenido de la imagen/título de un CMS o base de datos? –

el problema con su solicitud es que si el div no tiene un ancho específico, el texto no lo hace "saber" cuándo envolver y es por eso que utiliza el ancho del div externo ...

Entonces ... Debe agregar un ancho al div externo o en caso de utilizar un div que rodea la imagen + texto, un ancho en ese div.

EDIT:

Aquí van: http://jsfiddle.net/jnmtu/

Hice una prueba (en mi ejemplo es el tercero) con una mesa para probarlo primero y para refrescar mi mente de cómo funciona con tablas, y luego lo apliqué a la forma de CSS.

Cómo funciona:

Es necesario tener un div circundante que tiene una anchura mínima (1%), y hacer que se vea como una tabla; entonces el div interno (correspondiente a la "celda") debe tener una altura automática y un desbordamiento oculto, esto es necesario para "forzarlo" a estirar el ancho + altura del div (es un truco común).

NOTA: No lo he probado en Internet Explorer, pero sí funciona con Firefox y Safari.

Fuente

2011-03-30 11:18:48 jackJoe

¡Gracias :)! A pesar de que es un pequeño truco con ancho (1%), todavía prefiero esta solución sobre jquery ... – donpedroper

pequeño truco, me gusta ese juego de palabras :) de todos modos, CSS tiene algunos shortcomes en comparación con las tablas, este es un caso. Lo probé en la mayoría de los navegadores y solo IE7 (no importa IE6) no "me gusta" esto, puede ser posible hacerlo funcionar, supongo que con otro truco puede ser solucionable. Aun así, es maravilloso saber que se puede hacer. – jackJoe

Si he entendido bien,

Si la imagen es del mismo tamaño que el div (frontera Negro), el texto hará automáticamente lo que quiere. O intente overflow: none; en el div.

Pero, personalmente no lo haría así. Las divisiones son flexibles y escalables Entonces, yo diría que usan 2 o 3 divisiones entre sí.

p. Ej.

<div id="black-border"> 

<div id="for-image"> 

<div id="the-image-itself"> 
<img src="image.jpg"/> 
</div> 

<div id="the-comment"> 
<p> This image is awesome</p> 
</div> 

</div> 

</div>

Simplemente coloque la imagen dentro de un tamaño fijo e introduzca el comentario. también puede establecer

#the-image-itself, #the-comment{ 
display: block; 
}

Si te gusta

esperanza de que esto ayude :)

Fuente

2011-03-30 11:03:17 Kay

Creo que no me has entendido :) ¿Has visto el ejemplo de HTML que he pegado? Quiero que el texto descriptivo tenga el mismo ancho que la imagen de arriba ... Desafortunadamente no funcionó con su ejemplo :( – donpedroper

@JackJoe lo dijo bien, debe establecer un ancho para el div de envoltura para que coincida con el ancho de la imagen interior.

Esta es una manera de hacerlo: http://jsfiddle.net/audetwebdesign/bpN8x/

Básicamente, utilizo jQuery para determinar el ancho de la imagen y luego establecer la anchura del div contenedor.

Alternativamente, si estaba alimentando la imagen desde un CMS, podría determinar el ancho de la imagen dinámicamente y luego establecer el ancho en el divisor envoltorio utilizando un estilo en línea.

No creo que sea posible un CSS solamente debido a la forma en que el modelo de caja determina los anchos a medida que se presenta el contenido. Los anchos se heredan del elemento principal y no se pasan de los elementos secundarios.

Fuente

2011-03-30 11:38:02

Yearh, sabía que había una "solución" con jquery, pero esperaba que se solucionara con CSS en su lugar ... Tu solución funciona, pero esperaré y veré si hay una solución de CSS también; espero que esté bien;) – donpedroper

Tengo curiosidad también, este patrón html/css no es tan obvio como pensaba, por lo que será interesante ver otras respuestas. Agradecemos sus comentarios. –

una búsqueda en Google arroja el hecho de que esta pregunta se ha hecho un millón de veces y que todavía no hay una manera satisfactoria sin asociar un ancho al contenedor

Sin embargo ...

esto creo es un trabajo que se maneja mejor con el elemento de tabla - el elemento de tabla tiene un elemento caption que yo diría que es la herramienta para el trabajo?

Todos los navegadores excepto IE6/7 manejan bien el siguiente bit de código - IE6/7 lo maneja todo lo que va, pero no admite la propiedad CSS caption-side por lo que no colocará el título debajo de la imagen - que puede o no ser un problema - en mi humilde opinión de él todavía parecerá bastante (en esos marcos;)), pero tu caso es distinto, tal vez una alternativa si realmente no quieren a la escritura una anchura en

<div class="content"> 
<table summary="image with caption"> 
<caption> 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
</caption> 
<tr> 
<td><img src="http://dummyimage.com/300x300/dad/fff" width="300" height="300" alt="This image is awesome"></td> 
</tr> 
</table> 
</div>

CSS:

.content { 
    float: left; 
    padding: 20px; 
    border: 2px solid #000; 
} 

.content table { 
    border: 0; 
    border-collapse: collpase; 
} 

.content td { 
    padding: 0; 
} 

.content caption { 
    caption-side: bottom; 
}

Fuente

2011-03-30 15:08:54 clairesuzy

si se usó una tabla, solo necesita un ancho del 1%, sin necesidad de la etiqueta de título. Verifique mi tercer artículo en mi ejemplo. – jackJoe

sí, eso funcionaría también, pero de esa manera me parece mucho más "hacky", un truco para el ancho, y el uso de una segunda fila para el "título" sería técnicamente un truco también dado que una tabla ya los hace, pero ciertamente es una opción si realmente quieres el subtítulo de IE7 a continuación: simplemente fui por el "_por qué usar un truco cuando el uso adecuado del ** elemento de subtítulos ** servirá", eso es después de todo qué es, no? ;) – clairesuzy

Lo que se necesita es un ancho atribuido te gusta estar disponible en los diseños de Android, que se llama width: wrap-content. Quizás esta sea una buena propuesta para CSS, ya que ha demostrado ser útil en el diseño de pantallas.

Fuente

2012-12-04 14:42:29

fwiw el jQuery más pequeño que se me ocurrió es este

<div class="caption_wrap" style="float:right"> 
<img src="IMAG0332.jpg" onload="jQuery(this).parent().width(jQuery(this).width());"/><br /> 
this is some caption text, this is some caption text, this is some caption text, this is some  
caption text</div>

rápida.

Fuente

2012-12-05 15:18:31

CSS - div ancho, dependiendo del tamaño de las imágenes anteriores

Respuesta

Cuestiones relacionadas