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

puntos suspensivos css varias lineas

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 formas de hacerlo (incluidas cosas horribles como establecer manualmente su ancho a un número particular de píxeles), pero ¿cuál es la forma correcta ?

Editar: Una respuesta sugiere que apago "mostrar: bloquear", pero esto hace que el renderizado se vea mal en cada navegador en el que lo he probado. ¿Hay alguna forma de obtener un renderizado agradable con "display: block"? ¿apagado?

Editar: 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

Al agregar "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, hará que ocupe 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, por lo que iría 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.

Answer 2

El rectángulo beige es tan ancho porque tiene pantalla: bloque en el tramo, 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 forma en que he podido hacer fotogramas de manera confiable en todos los navegadores es establecer el ancho de forma 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 no conoce las dimensiones de la imagen con anticipación, porque espera a que se carguen las imágenes (tenga en cuenta que estamos usando $ (ventana) .load en lugar del $ (documento) .ready más común) antes agregando el marco de la imagen. Es un poco feo, pero funciona.

Aquí está el pictureFrame CSS para este ejemplo:

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

Me encantaría ver una solución confiable, de navegador cruzado, solo CSS 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

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

Answer 5

La forma correcta es usar:

.pictureframe {
    display: inline-block;
}

Editar: Flotar el elemento también produce el mismo efecto, esto se debe a que los elementos flotantes usan el mismo algoritmo de contracción para ajustar el ancho.