CSS: layout colonna verticale senza

Ok, mi sono appoggiato html & css nel 2001. Ero abituato a fare qualcosa del genere (Per creare un sito Web con un layout “colonna verticale”):

  Vertical-column layout   

Facile, tutto è allineato automaticamente come voglio, nessun mal di testa ecc. La vita era buona allora. TUTTAVIA, non molto tempo fa, ho letto che questo approccio non dovrebbe più essere usato. Stavo per provare un nuovo modo usando un gruppo di div, ma la validazione di w3c & w3c non mi piace che tu stia usando elementi di blocco come elementi inline … WTF !!!

Quindi … la mia frustrazione mi ha portato a chiederti ragazzi:

COME? Come realizzare qualcosa di simile in “modo moderno” … il più semplice ansible? Html 5 ha un modo migliore?
PERCHÉ? Perché ora non dovremmo usare questo approccio alla tabella per ottenere un “layout di colonne verticali” su un sito web?

Di seguito è riportata una griglia di base che ho messo insieme e che puoi utilizzare con qualsiasi sito web di dimensioni. Dovrai cancellare i float sulle colonne con overflow nascosto o clearfix. Se il tuo progetto non ha bisogno di supportare IE7, puoi utilizzare il riquadro di ridimensionamento a riquadri per aggiungere padding alle colonne, altrimenti aggiungi un elemento extra all’interno di ogni colonna per il riempimento.

Mentre posso apprezzare il fatto che creare colonne è stato semplicissimo con le tabelle che erano praticamente l’unica cosa che erano migliori per il layout.

HTML:

        

CSS:

 .grid { } .grid .col { float: left; } .grid .col.s1of1 { width: 100%; } .grid .col.s1of2 { width: 50%; } .grid .col.s1of3 { width: 33.33333333%; } .grid .col.s2of3 { width: 66.66666666%; } .grid .col.s1of4 { width: 25%; } .grid .col.s3of4 { width: 75%; } .grid .col.s1of5 { width: 20%; } .grid .col.s2of5 { width: 40%; } .grid .col.s3of5 { width: 60%; } .grid .col.s4of5 { width: 80%; } 
 HOW? 

Opzione 1: “Layout di colonne CSS 3” di Google. Questo è stato ben coperto negli ultimi 6 anni o giù di lì e ci sono le manate di tutorial là fuori.

Opzione 2: Google “CSS Framework” e sceglierne uno per creare il tuo layout. 960.gs è popolare.

 WHY? 

Idealmente, dovresti usare tabelle per dati tabulari e css per tracciare il resto della pagina. Perché? Beh, in teoria, CSS ti dà molta più flessibilità. Il miglior esempio è probabilmente quando si tratta di web design reattivo. Su un iPhone, potrei volere 2 colonne. Sul mio iPad, potrei volere 4 colonne. Tutto ciò può essere fatto con i CSS, ma diventa davvero complicato se si collega l’HTML usando le tabelle.

CSS3 ha alcune opzioni di layout di colonne pulite, ma non sono molto buone per quanto riguarda la compatibilità, e un buon numero di opzioni non è supportato da un gran numero di browser.

Se stai cercando di creare colonne di larghezza variabile / fissa, allora questo è probabilmente l’articolo che stai cercando:

http://www.alistapart.com/articles/holygrail

Usando questo metodo, puoi impostare uno o più div a una larghezza fissa, mentre un altro ridimensiona in modo appropriato per riempire la pagina.

Se desideri semplicemente ridimensionare tutte le colonne, fai in modo che siano tutte float: left e width: {percentage of page}%