Limite el texto al ancho de la imagen de hermanos / ancho automático en CSS

Question

Básicamente estoy intentando crear una versión de la " figura " Elemento (próximamente en HTML5), donde tengo una imagen con una breve descripción debajo.

Sin embargo, quiero limitar el ancho de todo este elemento al de la imagen, por lo que el texto no es más ancho que la imagen (se ajusta a varias líneas si es necesario).

HTML básico:

<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

Estoy bien versado en CSS pero no puedo pensar en ninguna solución CSS pura, sin agregar un style = " width: 100px " a div para coincidir con el ancho de la imagen.

Actualización : después de un poco de búsqueda y pensamiento, el mejor método parece ser el uso de un ancho en línea en la división. Mantendré el atributo de ancho en la imagen, en caso de que desee que el div sea un poco más ancho que la imagen (por ejemplo, para acomodar un título más largo).

Este enfoque también significa que podría tener dos imágenes una al lado de la otra con un título debajo. Si tengo un conjunto de imágenes del mismo tamaño, por supuesto puedo agregar un estilo adicional a cada div .

¡Gracias a todos los que respondieron!

Answer 1

Hoja de estilo

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

nota: para habilitar el ajuste simplemente elimine esa última línea css

HTML

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

Lo he comprobado en Chrome, Firefox e IE7 y se ve bien en los tres. Me doy cuenta de que esto tiene el ancho en el div y no el img, pero al menos solo necesita establecer el ancho en un solo lugar. Aparte de usar expresiones css (solo IE) no puedo ver una manera de configurar el ancho de divs exterior al ancho del primer elemento secundario.

Answer 2

Esto también podría lograrse utilizando 'display: table-caption' para el título, de la siguiente manera:

HTML

<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

Hoja de estilo

.wrapper {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

Este bloque también puede flotar a la izquierda de la derecha de otro texto. He probado esto en IE8 +. Aquí hay un ejemplo de JSBin: http://jsbin.com/xiyevovelixu/1

Answer 3

Para configurar el ancho para que coincida con la imagen automáticamente, podría utilizar

.figure {
  display: table;
  width: 1px;
}

Esto hace que el div se comporte como una tabla (no se admite en Internet Explorer). O podrías usar una tabla en lugar de la div. No creo que haya otra forma de establecer el ancho automáticamente.

Editar : la forma más sencilla es olvidarse del ancho automático y configurarlo a mano. Si es realmente necesario, puedes usar JavaScript o una tabla. En este caso, el uso de una tabla no es tan feo porque está abordando una limitación de la versión HTML. En el caso de las secuencias de comandos del lado del servidor, también puede establecer el ancho al generar la página.

Answer 4

Tuve el mismo problema y después de leer esto decidió para utilizar un estilo en línea en el elemento circundante. Parece la mejor solución sobre el uso de una tabla para mí.

Answer 5

Puede usar la solución display: table para todos los demás navegadores, y una Comportamiento de CSS para Internet Explorer.