Suggerimento rapido creazione di layout reattivi con float

Nel suggerimento rapido di oggi, impareremo come creare layout reattivi usando i float CSS, un metodo di layout vecchio ma attendibile. Fatto ciò, vedremo come Bootstrap gestisce le cose. Inizialmente, i float non erano destinati a costituire la base della struttura della pagina (i nuovi standard CSS come flexbox e la griglia mirano a risolverlo), quindi lavorare con i float può a volte essere complicato. Diamo un'occhiata a un esempio per illustrarlo.

Costruire un layout reattivo

Supponiamo di voler costruire questo layout di carte:

Scopri la versione a dimensione piena per un'idea più chiara.

Stili di base

Per queste carte, non vogliamo impostare un'altezza fissa per le didascalie. Né vogliamo che siano a larghezza fissa. Pertanto, per mantenere le carte utilizzabili, in modo che non si accumulino troppo, è necessario visualizzare un numero diverso di colonne in base alla dimensione del viewport.

Impostiamo alcune query multimediali, in modo che quanto segue sia vero:

Ecco il markup; elenca gli elementi contenenti immagini e didascalie all'interno di elementi figure:

Ecco il CSS per disegnare quel layout:

/ * stili stilistici * / corpo larghezza: 80%; larghezza massima: 1200 px; margine: 40px auto; font: normale 14px / 1.5 "Montserrat", "Helvetica Neue", sans-serif; sfondo: # cfd8dc; colore: # 37474f;  figura background: whitesmoke; margine: 0 0 40 px; box-shadow: 0px 2px 4px rgba (0,0,0,0,2);  figcaption padding: 20px;  img larghezza massima: 100%; altezza: auto; blocco di visualizzazione;  .clearfix: after content: ""; display: tabella; chiaro: entrambi;  ul margine: 0; padding: 0;  / * stili strutturali * / li list-style-type: none; fluttuare: a sinistra; padding-left: 15px; padding-right: 15px; dimensionamento della scatola: border-box;  / * media query * / @media screen e (min-width: 400px) li width: 50%;  @media screen e (min-width: 768px) li width: 33.333%;  @media screen e (min-width: 1024px) li width: 25%; 

Noterai le domande dei media in fondo, che determinano la larghezza delle carte in determinate finestre. Ecco cosa ci offre:

Il problema con questo layout fluido, tuttavia, è che non eliminando ogni nuova riga, alcune carte si bloccano quando si cerca di risalire a sinistra.

Identificare le carte da cancellare

Secondo l'esempio precedente, quando la riga contiene quattro carte, è necessario cancellare la quinta, quindi la nona e così via. Per ottenere questo, usiamo il : Nth-of-type (a + b) CSS pseudo-classe in cui il un B + parametro rappresenta il modello ripetuto desiderato. Ad esempio, su schermi di grandi dimensioni (vale a dire ≥1024px), usiamo 4n + 1. Questa formula trova ogni elemento che è un fattore di quattro, quindi seleziona il Il prossimo uno.

Ecco come potremmo modificare le nostre query multimediali per modificare le carte cancellate:

Ed ecco il CSS che lo realizza. Tieni presente che le nostre query sui media sono cumulative, pertanto dobbiamo reimpostare la scheda di cancellazione precedente ogni volta che ne definiamo una nuova:

 @media screen e (min-width: 400px) li width: 50%;  li: nth-of-type (2n + 1) clear: left;  @media screen e (min-width: 768px) li width: 33.333%;  li: nth-of-type (2n + 1) clear: none;  li: nth-of-type (3n + 1) clear: left;  @media screen e (min-width: 1024px) li width: 25%;  li: nth-of-type (3n + 1) clear: none;  li: nth-of-type (4n + 1) clear: left; 

Infine, vale la pena menzionare le seguenti cose:

• Invece del chiara: a sinistra valore di proprietà che potremmo ugualmente aver usato il più generico clear: both costo dell'immobile.
• Invece del : Nth-of-type (a + b) Pseudo-classe CSS potremmo anche aver usato il : Nth-child (an + b) pseudo-classe.
  

Ora che abbiamo discusso di un metodo per liberare i float, allo scopo di espandere le nostre conoscenze diamo un'occhiata all'approccio di Bootstrap.

Utilizzando il metodo Bootstrap

Sfruttando il sistema di griglia di Bootstrap, siamo in grado di creare un layout reattivo simile a quello precedente. Ancora una volta, a seconda della dimensione del viewport, il nostro layout cambierà:

Ecco l'HTML richiesto, che afferma che le nostre voci di elenco riempiono sei delle dodici colonne su finestre di dimensioni extra, quattro colonne su piccole e poi tre colonne su finestre di grandi dimensioni:

Normalmente, questo markup è tutto ciò di cui abbiamo bisogno, assumendo che tutte le colonne abbiano eguali altezze. Tuttavia, nel nostro esempio le colonne hanno altezze diverse, quindi dovremo cancellare i float. Per fare questo, useremo il clearfix classe così come le classi di utilità reattive.

Innanzitutto, su schermi extra piccoli (<768px), we have a two column layout, therefore we should clear the floats after every second list item. Add the following markup after every second list item:

Successivamente, su schermi piccoli e medi (≥768px e <1200px), we have a  three column layout, so we need to clear the floats after every third list item. To do this, we add some extra markup after every third list item (not necessary for the last one):

Infine, su schermi di grandi dimensioni (≥1200px), abbiamo un layout a quattro colonne, quindi dovremmo eliminare i float dopo ogni quarto elemento della lista. Ancora una volta, aggiungi un altro markup, questa volta dopo ogni quarto elemento della lista:

Questi blocchi aggiuntivi sono un po 'disordinati (molte persone non amano usare il markup per gli stili di guida) ma ottengono lo stesso risultato finale del nostro metodo iniziale. Ogni elemento della lista è nascosto, tranne che per determinati punti di interruzione quando si presuppone blocco di visualizzazione; agendo efficacemente come divisori orizzontali invisibili tra le nostre file.

Ecco la demo associata:

Conclusione

In questo breve articolo, abbiamo coperto due semplici tecniche per creare layout reattivi con float. Anche se i float potrebbero non essere (e non dovrebbero essere) la prima scelta per i tuoi layout moderni, spero che a un certo punto troverai queste tecniche utili. Se stai usando qualsiasi altra tecnica, assicurati di condividerla con noi!