divs uno al lado del otro

Question

Tengo 4 divs dentro de un div principal. Para hacer que aparezcan uno al lado del otro, le he dado a los 4 divs un estilo con float: left. Los divs aparecen uno al lado del otro, pero la altura del div principal no crece para abarcar la altura de los divs secundarios. ¿Qué me estoy perdiendo?

Answer 1

Después de 4 divs, debe "cancelar" el estilo de flotación. Esto se hace a través de la creación de una p por ejemplo, como: <p style="clear: both"></p> Su div principal obtendrá automáticamente el tamaño correcto.

Answer 2

Creo que deberías dar al padre div una altura del 100% no reparada para que abarque la altura de los divs secundarios si crecen.

Answer 3

Conjunto overflow: hidden; en el div principal.

Explicación: los elementos flotantes los eliminan del flujo de documentos normal. Por lo tanto, si un elemento dado contiene solo elementos flotados, no tendrá altura (o, por extensión, ancho), a menos que tenga un ancho implícito predeterminado en los elementos del bloque.

Establecer la propiedad de desbordamiento en oculto le dice al elemento primario que respete el ancho de sus elementos secundarios, pero oculte todo lo que quede fuera de su ancho y alto.

Por supuesto, la otra opción es agregar un elemento después de los divs flotantes, dentro del elemento primario, con clear: both; Esto hace que el último elemento se coloque después de todos los flotantes, dentro del flujo de documentos normal. Como está dentro del elemento primario, la altura del elemento principal es la altura de los elementos flotados, más el relleno estándar y la altura del elemento borrado.

Answer 4

Esto es una causa peculiar por la implementación de elementos flotantes, y ocurre cuando tienes un elemento padre que no contiene nada más que elementos flotantes secundarios. Hay dos métodos para resolverlo. Una es establecer la propiedad overflow del elemento principal en hidden, conocido a veces como el método de desbordamiento . El otro se conoce como clearfix method, e implica el uso de la pseudoclase :after.

El método de compensación tiene la ventaja de permitir que los elementos posicionados específicamente se "cuelguen" fuera del contenedor principal si alguna vez los necesita, a expensas de un poco de CSS y marcas adicionales. Este es el método que prefiero, ya que utilizo elementos colgantes con frecuencia. respuesta

Answer 5

de millinet va a funcionar, o puede flotar el div padre que también permitirá que se expanda para contener su contenido

Answer 6

recomiendo el método clearfix también. Este problema se produce porque flotante un elemento elimina cualquier altura que normalmente contendría.

PositionIsEverything posts a complete explanation, así como las soluciones correspondientes para IE6, ya que el: after pseudoselector no es compatible con navegadores más antiguos.

Answer 7

si desea que los divs sean de lado a lado, usted podría tratar de usar inline-block:

<style> 
    .alldivs { 
     display: inline-block; 
    } 
</style> 

<div id="wrapper"> 
    <div id="div1" class="alldivs"></div> 
    <div id="div2" class="alldivs"></div> 
    <div id="div3" class="alldivs"></div> 
    <div id="div4" class="alldivs"></div> 
</div>