Allineare div elementi successivo e sotto ogni altro

voglio allineare 4 div scatole in modo che siano in un layout 2x2 come questoAllineare div elementi successivo e sotto ogni altro

1 2 
3 4

Il mio codice è simile al seguente

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

che produce la seguente layout:

1 2 
3 
4

Qualcuno può aiutarmi con questo?

fonte

2010-09-02 Tim

Con gli ultimi progressi, è possibile utilizzare Flexbox per questo https://philipwalton.github.io/solved-by-flexbox/ – mixdev

dare a tutti loro float: left, poi avvolgerli in un recipiente abbastanza larga per adattarsi 2 di loro, in modo che il gli altri due vengono spinti verso il basso. Ad esempio,

<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; 
}

Edit: Se volete più div s dentro quelli che già hai, allora si può sempre applicare la stessa tecnica per i bambini , come

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

Quindi con CSS, utilizzare questo additi stile onal:

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

fonte

2010-09-02 07:35:07

Se sto usando altri DIV all'interno del mio DIV1, DIV2, ... funzionerebbe anche questo? per esempio.

DIV1

OtherElements

... ?? – Tim

@Tim. Aggiornato la risposta - in breve, sì –

sostituire <div style="width:300px;height:300px;clear:left;"> di 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>

fonte

2010-09-02 07:33:31 ArK

Grazie. È stato rapido e funziona :-) – Tim

usa sempre il contenitore div come descritto da Yi Jiang per evitare crolli con altre parti html. – ArK

Grazie per avermi ricordato di 'clear: both;'! –

è possibile ottenere utilizzando questo:

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

Ovviamente mettendo le informazioni di stile in un file CSS, piuttosto che nel codice HTML.

Vorrei provare ad evitare di impostare l'altezza & ad una dimensione specifica a meno che non sia semplicemente impossibile evitarlo. Causa un sacco di problemi se visualizzati su diversi browser con risoluzioni diverse.

fonte

2010-09-02 07:40:57 codingbadger

"Causa un sacco di problemi se visualizzati su diversi browser con risoluzioni diverse." Mente commentando questo? Non penso che sia mai il caso, a meno che non si dimentichi lo script di reset. Inoltre, hai lasciato un 'clear: both' sul terzo' div';) –

@Yi Jiang - oops, grazie. Ho appena visitato un sito che ha impostato larghezza e altezza come 'px' che ha funzionato, ma solo con una risoluzione specifica. Sono passato attraverso e cambiato in '%' e le pagine sono migliorate molto meglio con risoluzioni diverse. Solo qualcosa che ho incontrato di recente. forse era una cosa sola ed era solo un cattivo design in primo luogo. – codingbadger

Probabilmente è - framework come 960gs usano valori 'px' ridicolmente precisi che si sommano perfettamente per conformarsi alla griglia, e tutto si adatta bene a tutti i browser e le risoluzioni –

Allineare div elementi successivo e sotto ogni altro

risposta

Problemi correlati