Layout CSS a 4 colonne: fluido

Sto girando in tondo cercando di capirlo.

HTML / CSS:

 #content { padding: 20px; background: #F3F6F7; } .inner-box { background: #fff; } .inner-box .col { background:#eee; display:block; float:left; margin:1%; padding:20px; width:23%; }  
COl1
COl2
COl3
COl4

Fondamentalmente voglio un layout a 4 colonne fluido con un ugual bit di imbottitura attorno a ogni colonna e il tutto per estendersi al 100% sullo schermo.

Il codice sopra funziona ma non appena scala il browser, la quarta colonna sulla destra si sposterà verso il basso sotto il resto.

Personalmente ho rinunciato a usare i float. Trovo che siano troppo irritanti con cui lavorare.

Ora utilizzo display: inline-block; al posto dei galleggianti. Si noti che IE7 e versioni successive non supportano questo, ma esiste un eccezionale css hack che funziona perfettamente. Utilizza i commenti condizionali e un file CSS separato per IE7 e versioni successive.

L’ hacking Crossline Inline-Block è fantastico per aggirare questo problema.

Per tutti i miei progetti, definisco una class di blocchi in linea.

 .inline-block { display: inline-block; } 

e nel file CSS di IE, ho:

 .inline-block { zoom: 1; *display: inline; } 

È quindi ansible impaginare facilmente qualsiasi layout fluido, posizionando i div side-by-side e impostando una larghezza percentuale per ciascuno. Di solito definisco una class che denota una larghezza percentuale fissa

 .twenty-five-perc { width: 25%; } 

Quindi il tuo html risultante potrebbe assomigliare a questo:

 

Ora potresti chiederti perché ho i tag div apertura sulla stessa riga del tag di chiusura precedente. Questo perché il inline-block rispetta gli spazi bianchi e questo interromperà il layout. Puoi leggere ulteriori informazioni su questo problema e sui modi per mitigarlo qui: http://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/

Un bel po ‘di vagabondaggio qui, ma il risultato è che si possono fare dei layout fluidi davvero belli senza dover andare in giro con i layout float.

Alcuni pensieri

Innanzitutto, non è necessario il div clearfix. Utilizzo di overflow:hidden su #content è un modo migliore per gestirlo. Quindi il tuo HTML ha questo aspetto:

 
COl1
COl2
COl3
COl4

È più pulito. In secondo luogo, i div sono elementi a livello di blocco, quindi display:block; è inutile

Inoltre, a meno che non si utilizzino unità flessibili per le grondaie, si verificherà un problema quando il viewport diventa più piccolo di quanto consentito dalle percentuali delle colonne. Suggerirei di usare le percentuali per le grondaie. Ricorda che le percentuali sono percentuali in relazione all’elemento padre, quindi .col sarà una percentuale di #content .

Poiché utilizzi i float e ogni colonna ha una sua class disponibile, è facile aggiungere la grondaia come margine destro e impostarla su 0 sull’ultimo.

Quindi non solo il tuo markup è più semplice, ma anche il CSS:

 content { padding: 20px; background: #F3F6F7; overflow:hidden; } .col { background:#eee; float:left; width:22%; margin-right: 4%; } .col-4 {margin-right:0;} 

Si noti inoltre come (22% * 4) + (4% * 3) = 100%.

Spero che questo ti aiuti. Vedi http://jsfiddle.net/D759g/ per un esempio funzionante.

Vorrei usare il posizionamento assoluto in questo layout. Secondo me la soluzione più affidabile. Inoltre è ansible modificare l’imbottitura senza rompere il layout. Inoltre puoi aggiungere margini e margini, nessun problema.

 /* assuming your html is under the body tag */ html, body, #content, .inner-box { margin: 0px; height: 100%; } .inner-box { position: relative; } .col { position: absolute; top: 0px; bottom: 0px; padding: 1%; border: 1px solid black; } .col-1 { left: 0%; right: 75%; } .col-2 { left: 25%; right: 50%; } .col-3 { left: 50%; right: 25%; } .col-4 { left: 75%; right: 0%; } 

si noti che il valore a left di una colonna e il valore right della colonna precedente si sumno sempre al 100%

NOTA: questo non funziona in ie6.

Ci proverei con qualcosa di poco inferiore al 23%: i bordi dell’elemento DOM, i padding, i margini, ecc. Vengono aggiunti alla larghezza dell’elemento, invece di diventare parte della larghezza. Presumo che stai ridimensionando il browser, che ridimensiona le percentuali, ma non i paddings di pixel fissi, eccetera, il che significa che c’è più padding relativo alla larghezza interna, rendendo le colonne un po ‘troppo grandi per la larghezza del 100%.

Spero che questo ti aiuti,

Giacomo

Avere alcuni valori come pixel fissi causerà problemi.

Assicurati che tutti i tuoi paddings, margini e contenuti siano pari al 99% – Ho trovato che Mozilla ha problemi quando tutti i valori equivalgono al 100%.

   

Ecco il modo più semplice per creare un elenco di colonne di 2, 3 o 4 colonne. Basta regolare le percentuali per eguagliare il 99% della pagina (o 100 in questo caso).

 TITLE 
  • Left Item 1
  • Left Item 2
  • Left Item 3
  • Left Item 4
  • Left Item 5
  • Left Item 1
  • Left Item 2
  • Left Item 3
  • Left Item 4
  • Left Item 5
  • Right Item 1
  • Right Item 2
  • Right Item 3
  • Right Item 4
  • Right Item 5
  • Right Item 1
  • Right Item 2
  • Right Item 3
  • Right Item 4
  • Right Item 5