div simple que contiene span no se ajustará correctamente

Pensé que estaba bastante bien informado sobre CSS, pero este simple problema me desconcierta.div simple que contiene span no se ajustará correctamente

<div> <lapso> texto de ejemplo </span > </div >

resultados en la altura de la div siendo menor que la altura del vano si el lapso tiene un acolchado.

Me doy cuenta de que hay formas de usar "float" para hacer el tamaño de div correctamente, pero los flotadores siempre parecen presentar efectos secundarios no deseados.

¿No hay una manera simple y clara de decirle al div que el tamaño se ajuste a su contenido? Me parece bastante básico. Tal vez me estoy perdiendo algo.

Fuente

2010-04-10 brad

El uso de 'display: block' en el tramo es una solución, pero no está muy limpio ya que tendrías que hacerlo en todo lo que pudiera ser más grande que div (o al menos el elemento más alto). –

"muy bien informado sobre CSS" ... no hay fin para la comprensión de CSS, ¿no? y menos problemas "simples" de lo que uno podría haber imaginado. – Smandoli

En el caso básico, simplemente use display: inline-block en el lapso.

Aquí está mi caso de prueba (funciona en FF, Chrome y IE 6-8):

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Span padding test</title> 
</head> 
<body> 
    <div style="background-color: yellow; border: 1px solid red;"> 
     <span style="padding: 50px; display: inline-block;">test</span> 
    </div> 
</body> 
</html>

La razón por la adición de float: left a los div y span correcciones Esto se debe a flotar un elemento en línea convierte implícitamente a un elemento de bloque. Si no está familiarizado con los matices entre divs y tramos (también conocido como la diferencia entre el bloque y los elementos en línea), leer http://www.maxdesign.com.au/articles/inline/ debería ayudar.

Hay algunas otras maneras de resolver esto, pero es difícil decir cuál es el mejor sin saber más sobre el resto del marcado y los estilos.

Fuente

2010-04-12 17:47:53 timmfin

tenga en cuenta que mostrar: inline-block no funciona en IE6. Desbordamiento: auto en el div principal resolvería el problema e incluso funcionaría en IE6 – meo

Agregar overflow:auto a la div.

Fuente

2010-04-10 21:41:12 fuxia

Esta es la mejor manera. Sin embargo, puede crear barras de desplazamiento si no tienes cuidado. – tloflin

Esto no funcionó para mí (en Chromium 52). Hace que el relleno del tramo quede truncado. – Pistos

div simple que contiene span no se ajustará correctamente

Respuesta

Cuestiones relacionadas