- Home
- Categorie
- Coding e Sistemistica
- Help Center: consigli per il tuo progetto
- Usare position: absolute in zurb foundation
-
Usare position: absolute in zurb foundation
Buonasera a tutti,
Spero di aver scelto la sezione giusta per questa domanda - appena iscritto, abbiate pazienza se non ho afferrato bene tutte le regole del forum.
Sto sviluppando sito con Zurb Foundation e mi chiedevo se esiste un equivalente di .killer in foundation. Il mio problema è il seguente:
ho tre div .columns inseriti all'interno di un div .row, dei quali il div .columns centrale è il più alto dei tre; io ho bisogno di fissare il primo .columns al fondo del div .row, così da lasciare uno spazio vuoto in alto (per il testo) e allineare i primi due div .columns alla base del div row. Ho provato dando al div .row position:relative e al primo div .columns position:absolute e bottom:0, ma così facendo il primo div .columns esce dal flusso e gli altri due mi si spaginano. Normalmente risolverei il problema con un div .killer, ma mi pare di capire che Foundation abbia i sui killer ed è un rischio andarne a inserire di nuovi.
Ricopio qui sotto il codice sorgente e il relativo css, ridotti all'osso per semplificare la comprensione.
Codice sorgente:
<div class="row secondBand"><div class="large-4 columns leftCol"> <h2>Gli ultimi prodotti</h2> <div class="orbit-container slideshow-wrapper"> *qui c'è uno slider orbit* </div>
</div>
<div class="large-4 columns central">
<div class="banner">img</div>
<div class="banner">img</div>
<div class="banner">img</div>
</div><div class="large-4 columns">
<div class="banner">img</div>
<div class="banner">img</div>
</div></div>
CSS:.row.secondBand {padding: 0; position: relative;}
.row.secondBand .large-4.columns {width: 30%; padding: 0;}
.row.secondBand .large-4.columns.leftCol {position: absolute; bottom: 0;}
.row.secondBand .large-4.columns.central {margin: 0 5%;}
.row.secondBand .large-4.columns .banner {position: relative; clear: both; margin-bottom: 2em;}
Il problema, appunto, è che ancorando .large-4.columns.leftCol al fondo di .row.secondBand gli altri .large-4.columns si allargano nella pagina e .large-4.columns.central si sovrappone a .large-4.columns.leftCol.
C'è nessuno che sappia come risolvere questo problema usando le classi di Foundation?
Se il testo non è chiaro, chiedete pure.
Grazie mille!