Alinear div elementos siguiente y uno bajo el otro

quiero alinear 4 div cajas para que estén en un diseño 2x2 como estoAlinear div elementos siguiente y uno bajo el otro

1 2 
3 4

Mi código es el siguiente

<div style="width:300px;height:300px;float:left;"> DIV 1 </div> 

<div style="width:300px;height:300px;float:left;"> DIV 2 </div> 

<div style="width:300px;height:300px;clear:left;"> DIV 3 </div> 

<div style="width:300px;height:300px;float:left;"> DIV 4 </div>

que produce el siguiente diseño:

1 2 
3 
4

¿Alguien me puede ayudar con esto?

Fuente

2010-09-02 Tim

Con los últimos avances, puede usar Flexbox para este https://philipwalton.github.io/solved-by-flexbox/ – mixdev

darles a todos ellos float: left, después envolverlos en un recipiente lo suficientemente ancha como para adaptarse a 2 de ellos, por lo que la otros dos son empujados hacia abajo. Por ejemplo,

<div id="container"> 
    <div>Div 1</div> 
    <div>Div 2</div> 
    <div>Div 3</div> 
    <div>Div 4</div> 
</div>

CSS:

#container { 
    width: 600px; 
} 

#container div { 
    float: left; 
    height: 300px; 
    width: 300px; 
}

Editar: Si desea más div s dentro de los que ya tienes, entonces siempre se puede aplicar la misma técnica a los niños , como

<div id="container"> 
    <div> 
    <div>Inner Div 1</div> 
    <div>Inner Div 2</div> 
    <div>Inner Div 3</div> 
    <div>Inner Div 4</div> 
    </div> 
    <div>Div 2</div> 
    <div>Div 3</div> 
    <div>Div 4</div> 
</div>

Luego, con CSS, use este complemento estilo onal:

#container div div { 
    float: left; 
    height: 150px; 
    width: 150px; 
}

Fuente

2010-09-02 07:35:07

Si estoy usando otros DIV dentro de mi DIV1, DIV2, ... ¿esto también funcionaría? p.ej.

DIV1

OtherElements

... ?? – Tim

@Tim. Se actualizó la respuesta, en resumen, sí –

reemplazar <div style="width:300px;height:300px;clear:left;"> de Div 3 con <div style="width:300px;height:300px; clear:both; float:left">

html completo

<div style="width:300px;height:300px;float:left;"> 
    DIV 1 
</div> 

<div style="width:300px;height:300px;float:left;"> 
    DIV 2 
</div> 

<div style="width:300px;height:300px; clear:both; float:left"> 
    DIV 3 
</div> 

<div style="width:300px;height:300px;float:left;"> 
    DIV 4 
</div>

Fuente

2010-09-02 07:33:31 ArK

Gracias. Eso fue rápido y funciona :-) – Tim

siempre use div contenedor como lo describe Yi Jiang para evitar colapsos con otras partes html. – ArK

Gracias me recordó 'claro: ambos;'! –

se puede lograr usando esto:

<body style="width:600px; height:600px;"> 
<div id="container"> 
    <div style="width:50%; height:50%;float:left;"> 
    DIV 1 
</div> 

    <div style="width:50%; height:50%;float:left;"> 
    DIV 2 
</div> 

    <div style="width:50%; height:50%; float:left;"> 
    DIV 3 
</div> 
    <div style="width:50%; height:50%;float:left;"> 
    DIV 4 
</div> 

</div> 
</body>

Obviamente mediante la colocación de la información de estilo en un archivo CSS en lugar de en el código HTML.

Intentaré evitar establecer el ancho & de altura a un tamaño específico a menos que simplemente no pueda evitarlo. Causa muchos problemas cuando se ve en diferentes navegadores con diferentes resoluciones.

Fuente

2010-09-02 07:40:57 codingbadger

"Causa muchos problemas cuando se ve en diferentes navegadores con diferentes resoluciones". ¿Le molesta comentar esto? No creo que ese sea el caso a menos que olvides el script de reinicio. Además, dejaste un 'clear: both' en el tercer' div';) –

@Yi Jiang - oops, gracias. Acabo de pasar por un sitio que tenía todos los valores de ancho y alto establecidos como 'px', pero funcionaba solo a una resolución específica. Revisé y cambié a '%' y las páginas se procesaron mucho mejor en diferentes resoluciones. Solo algo que he encontrado recientemente. tal vez fue una sola y fue solo un mal diseño en primer lugar. – codingbadger

Probablemente lo es: marcos como 960gs usan valores 'px' ridículamente precisos que se suman perfectamente para ajustarse a la cuadrícula, y todo se ve bien en todos los navegadores y resoluciones –

Alinear div elementos siguiente y uno bajo el otro

Respuesta

Cuestiones relacionadas