Rask Tips Bygge Responsive Layouts With Floats

I dagens raske tips lærer vi hvordan du bygger responsive oppsett ved hjelp av CSS-flyter, en gammel, men likevel klarert layoutmetode. Med det gjort, ser vi hvordan Bootstrap håndterer ting. Flyter var ikke i utgangspunktet ment å danne grunnlag for sidestruktur (nyere CSS-standarder som flexbox og grid har som mål å adressere det), så det kan også være vanskelig å arbeide med flyter. La oss se på et eksempel for å illustrere det.

Bygg en responsiv layout

La oss anta at vi vil bygge dette kortoppsettet:

Sjekk ut fullstørrelsesversjonen for en klarere ide.

Grunnleggende stiler

For disse kortene ønsker vi ikke å angi en fast høyde for bildeteksten. Vi vil heller ikke at de skal være fast bredde. Derfor, for å holde kortene brukbare, slik at de ikke kaster opp for mye, må vi vise et annet antall kolonner avhengig av visningsportstørrelsen.

Vi satte opp noen medieforespørsler, slik at følgende er sant:

Her er markeringen; liste elementer som inneholder bilder og bildetekster i figurelementer:

Her er CSS til å utforme den utformingen:

/ * stilistiske stiler * / kropp bredde: 80%; maksimal bredde: 1200px; margin: 40px auto; font: normal 14px / 1.5 "Montserrat", "Helvetica Neue", sans-serif; bakgrunn: # cfd8dc; farge: # 37474f;  figur bakgrunn: whitesmoke; margin: 0 0 40px; boks-skygge: 0px 2px 4px rgba (0,0,0,0,2);  figcaption polstring: 20px;  img maksimal bredde: 100%; høyde: auto; skjerm: blokk;  .clearfix: etter innhold: ""; skjerm: bord; klare: begge;  ul margin: 0; polstring: 0;  / * strukturelle stiler * / li listestil-type: none; flyte: venstre; polstring-venstre: 15px; polstring-høyre: 15px; boks-størrelse: border-box;  / * media spørringer * / @media skjerm og (min bredde: 400px) li bredde: 50%;  @ media skjerm og (min bredde: 768px) li bredde: 33.333%;  @ media skjerm og (min bredde: 1024px) li bredde: 25%; 

Du vil legge merke til mediene i bunnen, som dikterer hvor bredt kortene er i bestemte visningsportaler. Her er hva det gir oss:

Problemet med denne væskeoppsettet er imidlertid at ved å ikke rydde hver ny rad, blir noen kort sittende fast når de prøver å finne veien tilbake til venstre.

Identifisere kort for å slette

I følge eksemplet ovenfor, når raden inneholder fire kort, må vi fjerne den femte, den niende og så videre. For å oppnå dette bruker vi : N-te-i-typen (an + b) CSS pseudoklass hvor et + b parameter representerer ønsket repeterende mønster. For eksempel, på store skjermer (dvs. ≥1024px), bruker vi 4n + 1. Denne formelen finner hvert element som er en faktor på fire, og velger deretter neste en.

Slik kan vi endre mediene våre for å endre hvilke kort som er slettet:

Og her er CSS som oppnår det. Vær oppmerksom på at våre medieforespørsler er kumulative, så vi må nullstille det forrige clearingkortet hver gang vi definerer en ny:

 @media skjerm og (min bredde: 400px) li bredde: 50%;  li: nth-of-type (2n + 1) clear: left;  @ media skjerm og (min bredde: 768px) li bredde: 33.333%;  li: nth-of-type (2n + 1) klart: ingen;  li: nth-of-type (3n + 1) clear: left;  @ media skjerm og (min bredde: 1024px) li bredde: 25%;  li: nth-of-type (3n + 1) klart: ingen;  li: nth-of-type (4n + 1) clear: left; 

Til slutt er det verdt å nevne følgende ting:

• I stedet for klart: venstre eiendom verdi vi kunne like har brukt mer generisk klar: begge Eiendomsverdi.
• I stedet for : N-te-i-typen (an + b) CSS pseudoklass vi kunne like har brukt : N-te-barn (an + b) pseudo-klasse.
  

Nå som vi har diskutert en metode for rydding av flåtene, for å utvide vår kunnskap, la oss se på Bootstraps tilnærming.

Bruke Bootstraps metode

Ved å utnytte Bootstraps nettverkssystem, kan vi bygge et responsivt layout som ligner på det forrige. Igjen, avhengig av visningsportstørrelsen, endres oppsettet vårt:

Her er den krevde HTML-rapporten, og angir at våre listeposter fyller opp seks av de tolv kolonnene på ekstra små visningsport, fire kolonner på små, deretter tre kolonner på store visningsportaler:

Normalt er denne oppslaget alt vi trenger, forutsatt at alle kolonnene har like høyder. Men i vårt eksempel har kolonnene forskjellige høyder, så vi må fjerne flåtene. For å gjøre dette, bruker vi clearfix klasse samt responsive verktøy klasser.

Først på ekstra små skjermer (<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:

Deretter på små og mellomstore skjermer (≥768px og <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):

Til slutt, på store skjermer (≥1200px), har vi en fire kolonneoppsett, så vi bør tømme floats etter hver fjerde listepost. Igjen, legg til noe mer oppslag, denne gangen etter hvert fjerde listepost:

Disse ekstra blokkene er litt rotete (mange mennesker misliker med å bruke markering for kjørestiler), men de oppnår det samme sluttresultatet som vår første metode. Hvert listepunkt er skjult, unntatt under bestemte bruddpunkter når de antar skjerm: blokk; Virkelig fungerer som usynlige horisontale skillelinjer mellom våre rader.

Her er den tilhørende demo:

Konklusjon

I denne korte artikkelen dekket vi to enkle teknikker for å skape responsive layouter med flyter. Selv om flyter kanskje ikke (og ikke bør være) førstevalg for dine moderne layouter, håper jeg at du på et tidspunkt vil finne disse teknikkene nyttige. Hvis du bruker noen annen teknikk, må du dele den med oss!