Hacer que el div externo tenga automáticamente la misma altura que su contenido flotante


94

Quiero que el exterior div, que es negro, envuelva su divs flotando dentro de él. No quiero usar style='height: 200pxen el divcon la outerdividentificación ya que quiero que sea automáticamente la altura de su contenido (por ejemplo, los flotantes div).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

¿Cómo lograrlo?

Respuestas:


167

Puede configurar el outerdivCSS de este

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

También puede hacer esto agregando un elemento al final con clear: both. Esto se puede agregar normalmente, con JS (no es una buena solución) o con :afterpseudoelemento CSS (no es ampliamente compatible con IE más antiguos).

El problema es que los contenedores no se expandirán naturalmente para incluir niños flotantes. Tenga cuidado con el uso del primer ejemplo, si tiene elementos secundarios fuera del elemento principal, se ocultarán. También puede usar 'auto' como valor de propiedad, pero esto invocará barras de desplazamiento si algún elemento aparece afuera.

También puede intentar hacer flotar el contenedor principal, pero dependiendo de su diseño, esto puede ser imposible / difícil.


37
Ojalá entendiera la lógica de por qué overflow: hidden funciona en este caso.
masteroleary

2
Sí, esperaba que no fuera solo yo quien pensara que esto era contrario a la intuición. alex?
regularmike

3
@masteroleary @regularmike HTML/CSSnunca ha sido una buena tecnología de interfaz de usuario, por lo que las cosas contrarias a la intuición son bastante comunes :)
Yuriy Nakonechnyy

2
@masteroleary Me doy cuenta de que este es un hilo antiguo, pero recientemente intenté responder una pregunta similar en stackoverflow.com/questions/21041297#21041625 - espero que ayude
xec

1
+1 para la floatsolución. Funciona muy bien con los demás fallos, especialmente cuando se combina con Twitter Bootstrap.
Fizzix

17

En primer lugar, le recomiendo encarecidamente que haga su estilo CSS en un archivo CSS externo, en lugar de hacerlo en línea. Es mucho más fácil de mantener y puede ser más reutilizable usando clases.

Trabajando con la respuesta de Alex (y la corrección clara de Garret) de "agregar un elemento al final con claro: ambos", puede hacerlo así:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

Esto funciona (pero como puede ver, CSS en línea no es tan bonito).


¿Por qué me bajaron la calificación? Funciona, y reconocí con razón que no era una buena solución.
Lycana

1
No estoy seguro, hice +1 para que volvieras a 0 al menos. Tal vez fue rechazado porque no corrigió su CSS incorrecto ... es decir, usar el signo igual para establecer una propiedad de CSS es incorrecto.
alex

lo suficientemente justo. Agradezco el +1 alex. Pensé que mi declaración era justa.
Lycana

Esta solución es mejor en mi opinión. Habría aceptado esta respuesta si fuera mi pregunta.
ksg91


7

Sé que algunas personas me odiarán, pero he descubierto display:table-cellque puedo ayudar en estos casos.

Es realmente más limpio.


pantalla de uso de div externo: tabla; y dentro de div use display: table-cell;
Anukul Limpanasil

4

En primer lugar, no use width=300pxesa configuración de atributo para la etiqueta, no CSS, use width: 300px;en su lugar.

Sugeriría aplicar la clearfixtécnica en el #outerdiv. Clearfix es una solución general para borrar 2 divs flotantes, de modo que el div padre se expandirá para acomodar los 2 divs flotantes.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

A continuación, se muestra un ejemplo de su situación y lo que Clearfix hace para resolverla.


3

Utilice jQuery:

Establezca la altura del padre = la altura del desplazamiento del hijo.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

3
Exagerado, cuando puedes hacerlo solo con CSS.
alex

1
Con mi respuesta, puede establecer la altura de los padres igual que la altura de los niños, pero al usar el desbordamiento no estamos cambiando la altura de los padres, lo que creará algún problema si mostramos datos después de la div principal.
Harpal

1

Utilizar clear: both;

¡Pasé más de una semana tratando de resolver esto!

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.