Snelle tip responsieve lay-outs bouwen met zwevende elementen

In de snelle tip van vandaag leren we hoe we responsieve lay-outs kunnen bouwen met behulp van CSS-drijvers, een oude maar vertrouwde lay-outmethode. Als dat klaar is, zullen we zien hoe Bootstrap omgaat met dingen. Floats waren oorspronkelijk niet bedoeld als basis voor de paginastructuur (nieuwere CSS-standaarden zoals flexbox en grid proberen dit aan te pakken), dus werken met praalwagens kan soms lastig zijn. Laten we een voorbeeld bekijken om dat te illustreren.

Een responsieve lay-out bouwen

Laten we aannemen dat we deze kaartlay-out willen bouwen:

Bekijk de volledige versie voor een duidelijker idee.

Basisstijlen

Voor deze kaarten willen we geen vaste hoogte voor de bijschriften instellen. We willen ook niet dat ze een vaste breedte hebben. Om de kaarten dus bruikbaar te houden, zodat ze niet te veel squashen, moeten we een ander aantal kolommen weergeven, afhankelijk van de viewportgrootte.

We hebben enkele mediaquery's ingesteld, zodat het volgende waar is:

Dit is de opmaak; lijst items met afbeeldingen en bijschriften in figuurelementen:

Hier is de CSS om die lay-out te stylen:

/ * stilistische stijlen * / body width: 80%; maximale breedte: 1200 px; marge: 40 px auto; lettertype: normaal 14px / 1.5 "Montserrat", "Helvetica Neue", schreefloos; achtergrond: # cfd8dc; kleur: # 37474f;  figuur achtergrond: whitesmoke; marge: 0 0 40px; box-shadow: 0px 2px 4px rgba (0,0,0,0.2);  figcaption opvulling: 20px;  img max-width: 100%; hoogte: auto; weergave: blok;  .clearfix: na content: ""; weergave: tafel; beiden opschonen;  ul margin: 0; opvulling: 0;  / * structurele stijlen * / li list-style-type: none; zweven: links; padding-links: 15px; opvulling rechts: 15px; box-sizing: border-box;  / * mediaquery's * / @media-scherm en (min-breedte: 400px) li width: 50%;  @media-scherm en (min-breedte: 768px) li width: 33.333%;  @media-scherm en (min-breedte: 1024px) li width: 25%; 

U zult onderaan de media vragen opmerken, die bepalen hoe breed de kaarten bij bepaalde viewports zijn. Dit is wat het ons geeft:

Het probleem met deze vloeiende opmaak is echter dat door het niet wissen van elke nieuwe rij, sommige kaarten vastlopen wanneer ze proberen de weg terug naar links te vinden.

Identificerende kaarten om te wissen

Volgens het bovenstaande voorbeeld moeten we, wanneer de rij vier kaarten bevat, de vijfde, dan de negende, enzovoort wissen. Om dit te bereiken, gebruiken we de : N-of-type (s + b) CSS pseudo-klasse waar de Een + b parameter vertegenwoordigt het gewenste herhalende patroon. Bijvoorbeeld op grote schermen (d.w.z. ≥ 1024 px) die we gebruiken 4n + 1. Deze formule vindt elk element dat een factor vier is en selecteert vervolgens het volgende een.

Zo kunnen we onze mediaquery's wijzigen om te wijzigen welke kaarten worden gewist:

En hier is de CSS die dat bereikt. Houd er rekening mee dat onze mediaquery's cumulatief zijn, dus we moeten de vorige clearingskaart opnieuw instellen telkens wanneer we een nieuwe definiëren:

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

Ten slotte is het de moeite waard om de volgende dingen te vermelden:

• In plaats van de clear: left waarde van het object, kunnen we evengoed de meer generieke hebben gebruikt beiden opschonen eigendoms-waarde.
• In plaats van de : N-of-type (s + b) CSS pseudo-klasse hadden we evengoed de : N-kind (s + b) pseudo-class.
  

Nu we een methode hebben besproken om de dobbers te verwijderen, willen we, terwille van het uitbreiden van onze kennis, de aanpak van Bootstrap bekijken.

Bootstrap's methode gebruiken

Door gebruik te maken van Bootstrap's rastersysteem, kunnen we een responsieve lay-out bouwen die lijkt op de vorige. Nogmaals, afhankelijk van de viewport-grootte, verandert onze layout:

Dit is de vereiste HTML, waarin staat dat onze lijstitems zes van de twaalf kolommen vullen op extra kleine viewports, vier kolommen op kleine en dan drie kolommen op grote viewports:

Normaal gesproken is deze markup alles wat we nodig hebben, ervan uitgaande dat alle kolommen dezelfde hoogte hebben. In ons voorbeeld hebben de kolommen echter verschillende hoogten, dus we moeten de praalwagens leegmaken. Om dit te doen, zullen we de Clearfix klasse evenals de reagerende hulpprogramma klassen.

Ten eerste op extra kleine schermen (<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:

Vervolgens op kleine en middelgrote schermen (≥768 px en <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):

Ten slotte hebben we op grote schermen (≥1200px) een lay-out met vier kolommen, dus we moeten de praalwagens na elk vierde lijstitem wissen. Nogmaals, voeg wat meer markup toe, deze keer na elke vierde lijstitem:

Deze extra blokken zijn een beetje rommelig (veel mensen houden niet van markeringen gebruiken voor rijstijlen), maar ze bereiken hetzelfde eindresultaat als onze oorspronkelijke methode. Elk item in de lijst is verborgen, behalve onder bepaalde onderbrekingspunten wanneer ze uitgaan weergave: blok; effectief fungeren als onzichtbare horizontale verdelers tussen onze rijen.

Hier is de bijbehorende demo:

Conclusie

In dit korte artikel hebben we twee eenvoudige technieken behandeld voor het maken van responsieve lay-outs met praalwagens. Hoewel floats misschien niet de eerste keuze voor je moderne lay-outs zijn (en dat ook niet mogen zijn), hoop ik dat je op een gegeven moment deze scriptietechnieken nuttig zult vinden. Als je een andere techniek gebruikt, deel hem dan met ons!