¿Cómo evito que un DIV se expanda para ocupar todo el ancho disponible?

Question

En el siguiente HTML, me gustaría que el marco alrededor de la imagen sea ajustado: no estirar y ocupar todo el ancho disponible en el contenedor principal. Sé que hay un par de maneras de hacerlo (incluyendo cosas horribles como configurar manualmente su ancho a un número particular de píxeles), pero ¿cuál es el derecho manera?

Edit: Una respuesta sugiere que apago "display: block" - pero esto hace que el renderizado se vea mal en cada navegador que lo he probado. ¿Hay alguna manera de obtener un aspecto agradable? con "display: block" off?

Edit: Si agrego "float: left" al pictureframe y "clear: both" a la etiqueta P, se ve genial. Pero no siempre quiero que estos marcos floten hacia la izquierda. ¿Hay una manera más directa de lograr lo que sea que "flote" esté haciendo?

.pictureframe { 
 
    display: block; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    border: solid brown 2px; 
 
    background-color: #ffeecc; 
 
} 
 
#foo { 
 
    border: solid blue 2px; 
 
    float: left; 
 
} 
 
img { 
 
    display: block; 
 
}

<div id="foo"> 
 
    <span class="pictureframe"> 
 
     <img alt='' 
 
     src="http://stackoverflow.com/favicon.ico" /> 
 
    </span> 
 
    <p> 
 
    Why is the beige rectangle so wide? 
 
    </p> 
 
</div>

Answer 1

El derecho forma es utilizar:

.pictureframe { 
    display: inline-block; 
} 

Editar: flotante el elemento también produce el mismo efecto, esto se debe a elementos flotantes utilizan el mismo algoritmo shrink-to-fit para la determinación de la anchura.

Answer 2

El rectángulo de color beige es tan amplia porque tiene display: block en el lapso, convirtiendo un elemento en línea en un elemento de bloque. Se supone que un elemento de bloque ocupa todo el ancho disponible, un elemento en línea no. Intente quitar la pantalla: bloquear desde el CSS.

Answer 3

La única manera en que he podido hacer fotogramas de manera confiable en todos los navegadores es establecer el ancho de manera dinámica. Aquí hay un ejemplo usando jQuery:

$(window).load(function(){ 
    $('img').wrap('<div class="pictureFrame"></div>'); 
    $('div.pictureFrame').each(function(i) { 
    $(this).width($('*:first', this).width()); 
    }); 
}); 

Esto funcionará incluso si usted no sabe las dimensiones de imagen antes de tiempo, ya que espera a que las imágenes se carguen (nótese que estamos utilizando $ (ventana). cargue en lugar del $ (documento) .ready más común) antes de agregar el marco de la imagen. Es un poco feo, pero funciona.

Aquí es el CSS PictureFrame para este ejemplo:

.pictureFrame { 
    background-color:#FFFFFF; 
    border:1px solid #CCCCCC; 
    line-height:0; 
    padding:5px; 
} 

Me gustaría ver un cross-browser, solución fiable, CSS, sólo para este problema. Esta solución es algo que se me ocurrió para un proyecto anterior después de mucha frustración tratando de hacerlo funcionar solo con CSS y HTML.

Answer 4

Sí display:inline-block es tu amigo. También eche un vistazo a: display:-moz-inline-block y display:-moz-inline-box.

Answer 5

Añadiendo "float: left" al selector span.pictureFrame corrige el problema ya que eso es lo que "float: left" hace :) Aparte de todo lo demás que flota un elemento a la izquierda, ocupará solo el espacio requerido por su contenido. Cualquier elemento de bloque siguiente (la "p", por ejemplo) flotará alrededor del elemento "flotante". Si "borra" el flotador de la "p", seguiría el flujo de documentos normal, yendo por debajo de span.pictureFrame. De hecho, necesita "clear: left" ya que el elemento ha sido "float: left" -ed. Para una explicación más formal, puede consultar las especificaciones de CSS, aunque está más allá de la comprensión de la mayoría de las personas.