Snabbtips Bygga Responsive Layouts With Floats

I dagens snabba tips läser vi hur man bygger responsiva layouter med CSS-floats, en gammal men ändå tillförlitlig layoutmetod. Då får vi se hur Bootstrap hanterar saker. Floats var inte i första hand avsedda att ligga till grund för sidstrukturen (nyare CSS-standarder som flexbox och rutnät syftar till att ta itu med det), så det kan vara svårt att arbeta med flottor. Låt oss titta på ett exempel för att illustrera det.

Bygga en Responsive Layout

Låt oss anta att vi vill bygga denna kortlayout:

Kolla in fullstorleksversionen för en tydligare idé.

Grundläggande stilar

För dessa kort vill vi inte ange en fast höjd för bildtexten. Vi vill inte heller att de ska vara fasta bredd. För att hålla korten användbara, så att de inte kläms upp för mycket, måste vi visa ett annat antal kolumner beroende på visningsportstorleken.

Vi ställer in några mediefrågor, så att följande är sant:

Här är markeringen; lista objekt som innehåller bilder och bildtexter inom figurelement:

Här är CSS att utforma den layouten:

/ * stilistiska stilar * / kropp bredd: 80%; maxbredd: 1200px; marginal: 40px auto; typsnitt: normal 14px / 1,5 "Montserrat", "Helvetica Neue", sans-serif; bakgrund: # cfd8dc; färg: # 37474f;  siffra bakgrund: whitesmoke; marginal: 0 0 40px; boxskugga: 0px 2px 4px rgba (0,0,0,0,2);  figcaption padding: 20px;  img maxbredd: 100%; höjd: auto; display: block;  .clearfix: efter innehåll: ""; display: bord; klara: båda;  ul marginal: 0; vaddering: 0;  / * strukturella stilar * / li list-style-type: none; flyta till vänster; stoppning-vänster: 15px; padding-right: 15px; box-dimensionering: gränsvärde;  / * mediafrågor * / @media skärm och (min bredd: 400px) li bredd: 50%;  @ media skärm och (min bredd: 768px) li width: 33.333%;  @ media skärm och (min bredd: 1024px) li bredd: 25%; 

Du märker mediefrågorna längst ner, vilket dikterar hur brett korten är i vissa visningsportar. Här är vad det ger oss:

Problemet med denna vätskelayout är dock att genom att inte rensa varje ny rad blir vissa kort fastna när de försöker hitta tillbaka till vänster.

Identifiera kort att rensa

Enligt exemplet ovan, när raden innehåller fyra kort, måste vi rensa den femte, den nionde och så vidare. För att uppnå detta använder vi : N: te-of-typ (en + b) CSS pseudoklass där en + b parametern representerar det önskade repeterande mönstret. Till exempel, på stora skärmar (dvs ≥1024px), använder vi 4n + 1. Denna formel hittar varje element som är en faktor av fyra och väljer sedan Nästa ett.

Så här kan vi ändra våra mediefrågor för att ändra vilka kort som rensas:

Och här är CSS som uppnår det. Observera att våra mediefrågor är kumulativa, så vi måste återställa det tidigare clearingkortet varje gång vi definierar en ny:

 @media skärm och (min bredd: 400px) li bredd: 50%;  li: nth-of-type (2n + 1) clear: left;  @ media skärm och (min bredd: 768px) li width: 33.333%;  li: nth-of-type (2n + 1) klar: ingen;  li: nth-of-type (3n + 1) clear: left;  @ media skärm och (min bredd: 1024px) li bredd: 25%;  li: nth-of-type (3n + 1) klar: ingen;  li: nth-of-type (4n + 1) clear: left; 

Slutligen är det värt att nämna följande saker:

• Istället för tydlig: vänster egendom värde vi kunde lika har använt den mer generiska tydligt: ​​båda fastighetsvärde.
• Istället för : N: te-of-typ (en + b) CSS pseudoklass vi kunde lika har använt : N: te-barn (an + b) pseudo-klass.
  

Nu när vi har diskuterat en metod för att rensa flottorna, för att expandera vår kunskap, låt oss ta en titt på Bootstraps strategi.

Använda Bootstraps Metod

Genom att utnyttja Bootstraps nätsystem kan vi bygga en responsiv layout liknande den föregående. Återigen, beroende på visningsstorlek, ändras vår layout:

Här är den obligatoriska HTML-filen som anger att våra listobjekt fyller upp sex av de tolv kolumnerna på extra små visningsportar, fyra kolumner på små och tre kolumner på stora visningar:

Normalt är denna markering allt vi behöver, förutsatt att alla kolumner har samma höjder. Men i vårt exempel har kolumnerna olika höjder, så vi måste rensa flottorna. För att göra detta använder vi clearfix klass samt de responsiva verktygsklasserna.

Först på extra små skärmar (<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:

Därefter på små och medelstora skärmar (≥768px och <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):

Slutligen, på stora skärmar (≥1200px), har vi en fyra kolonnlayout, så vi bör rensa floatsna efter varje fjärde lista. Återigen, lägg till lite mer markup, den här gången efter varje fjärde lista:

Dessa ytterligare block är lite rörigt (många människor ogillar att använda markering för körstilar) men de uppnår samma slutresultat som vår första metod. Varje listobjekt är dolt, förutom under vissa brytpunkter när de antar display: block; effektivt fungera som osynliga horisontella skiljare mellan våra rader.

Här är den därtill hörande demo:

Slutsats

I den här korta artikeln täckte vi två enkla tekniker för att skapa responsiva layouter med floats. Även om flottor kanske inte är (och borde inte vara) förstahandsvalet för dina moderna layouter, hoppas jag att någon gång hittar du dessa tekniker som är användbara. Om du använder någon annan teknik, var noga med att dela den med oss!