Creare colonne intelligenti con jQuery e i CSS

colonne-intelligenti

Quando dobbiamo realizzare un sito web a più colonne possiamo scegliere di utilizzare due soluzioni: un layout con larghezza fissa delle colonne oppure un layout "liquido" che si ridimensiona in base alle dimensioni della finestra del browser.
Se scegliamo di utilizzare il layout fixed imposteremo una dimensione fissa per ogni colonna fino ad occupare tutto lo spazio della pagina, ma ad un certo punto certamente ci accorgeremo che le colonne non si adatteranno perfettamente nello spazio da riempire, ma andranno a capo lasciando un margine.

layout-fisso

Se invece optiamo per il layout liquid le colonne riempiranno perfettamente lo spazio a disposizione senza lasciare nessun margine, ma che ci troveremo ad avere un numero predefinito di colonne su una singola riga in base.
Per esempio impostando la dimensione a 25% potremmo inserire solamente quattro colonne su ogni singola riga (25% x 4 = 100%)

layout-percentuale

SOH Tanaka è riuscito a mettere insieme le caratteristiche dei due layout attraverso l’uso di jQuery e dei CSS.
Per capirne bene il funzionamento vi consiglio di guardare la demo, mentre per scaricarlo cliccate qui.

Potrebbero interessarti anche...

2 Risposte

  1. 19 giugno 2009

    […] articolo originale:  Creare colonne intelligenti con jQuery e i CSS | Markdvl Killer … Articoli correlati: Galleria fotografica con immagini e testo html | Markdvl Killer […]

  2. 20 giugno 2009

    […] Creare colonne intelligenti con jQuery e i CSS giovedì 18 giugno 2009 | Tratto da: http://www.markdvl.com […]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Facebook Auto Publish Powered By : XYZScripts.com