[HTML+CSS] ALLINEAMENTO IMMAGINI FLOAT:LEFT

[jacopo.g93]

ciao a tutti, devo allineare le immagini come nella foto in allegato, scusate la qualita' comunque le immagini sono 5(2 piccole a sinistra, 1 grande al centro e 2 piccole a destra)
come codice per l'allineamento nell' index ho fatto:
<div id="parte1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

mentre nel css ho fatto:

#parte1{
width: 950px;
height: 470px;
position: absolute;
top: 200px;
border: solid 2px;
}
#parte1 div:nth-child(1){
width:230px;
height: 230px;
background-image: url(img/12.jpg);
float: left;
}
#parte1 div:nth-child(2){
width:230px;
height: 230px;
background-image: url(img/11.jpg);
float: left;
}
#parte1 div:nth-child(3){
width:470px;
height: 470px;
background-image: url(img/01.jpg);
float: left;
}
#parte1 div:nth-child(4){
width:230px;
height: 230px;
background-image: url(img/02.jpg);
float: right;
}
#parte1 div:nth-child(5){
width:230px;
height: 230px;
background-image: url(img/22.jpg);
float: right;
}


le immagini non si allineano pero' come dovrebbero essere, avete altre soluzioni?

[OoZic]

usa un sistema di griglie non improvvisare nulla
http://jsfiddle.net/2XWp5/

ho usato purecss.io, puoi utilizzare solo il modulo core+grid (che è quello che serve a te) e sono solo 2k di css.

[MicheleRaponi]

Qui puoi vedere la stesso risultato proposto da OoZic senza l'utilizzo di risorse esterne:

http://jsfiddle.net/uE5U2/

[OoZic]

Originariamente inviato da MicheleRaponi

Qui puoi vedere la stesso risultato proposto da OoZic senza l'utilizzo di risorse esterne:

http://jsfiddle.net/uE5U2/

personalmente consiglio sempre un framework, in questo caso purecss sono soli 2k, una miseria, ma il vantaggio è avere una consistenza e integrare anche un reset/normalize per avere un risultato coerente in tutti i browser.

[MicheleRaponi]

Originariamente inviato da OoZic

personalmente consiglio sempre un framework, in questo caso purecss sono soli 2k, una miseria, ma il vantaggio è avere una consistenza e integrare anche un reset/normalize per avere un risultato coerente in tutti i browser.

Tutto vero, i vantaggi sono innumerevoli e li considero (i frameworks) 9/10 delle volte indispensabili, però prima di usare la calcolatrice è meglio imparare a contare a mano..

[jacopo.g93]

grazie per i consigli, alla fine sono riuscito a sistemare il sito tenendo il mio codice iniziale, ho solo aggiunto qualche margin ed è andato tutto bene