Inhoud
Het is middernacht, en die div op uw site ziet er nog steeds uit als de speelgoedkist van een kind. Alle elementen zijn een door elkaar gegooide puinhoop, en elke keer dat je met CSS's speelt Scherm eigendom, herschikken ze zichzelf in een heel ander stukje onzin.
Als je op mij lijkt, los je dit waarschijnlijk op door zachtjes te mompelen en steeds agressiever te worden met je toetsenbord. En hoewel die strategie eerder voor mij heeft gewerkt, ben ik onlangs op zoek gegaan naar een betere manier om het Scherm eigendom.
Het blijkt de basis van Scherm zijn veel eenvoudiger dan ik aanvankelijk dacht. In feite gebruiken ze dezelfde principes als het inpakken van een koffer. Ik ga het dekken display: blok, inline-blok en in lijn. Als je al eerder een koffer netjes hebt gerangschikt, zie je de parallel. Als jij het soort persoon bent dat al je kleding op een lukrake manier ramt - nou, er is maar zoveel dat ik voor je kan doen.
Onze koffer bevat drie soorten kleding:
- Fijne was, zoals een overhemd met kraag
- T-shirts die kunnen worden opgerold
- Sokken of ondergoed die in openingen kunnen worden gestopt
Ter referentie, als we de koffer in HTML zouden modelleren, zou het er als volgt uitzien:
div class = 'suitcase'> div class = 'delicaat'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'sokken'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
De delicate items bovenop
Display: blok is de standaardinstelling voor de meeste HTML-elementen. Dat betekent dat het element de volledige horizontale ruimte in zijn container inneemt div. Als het naast andere elementen op hetzelfde niveau staat, zal het een nieuwe regel beginnen en geen andere elementen op zijn regel toestaan. Het is vergelijkbaar met de delicate items die u boven in uw koffer legt. Dit zijn delicate of slimme artikelen, zoals overhemden met kraag. Je wilt niet dat ze gekreukt worden, dus zorg ervoor dat ze niet tegen andere kledingstukken worden gedrukt.
Dit brengt een van de moeilijkste onderdelen van display: blok. Merk op dat het overhemd met kraag niet de hele breedte van de koffer beslaat? Dat betekent niet dat andere items naar hun niveau zullen springen. Stel dat dit overhemd 60 procent van de breedte van de koffer is; het zou nog steeds andere elementen blokkeren om er op het hoogste niveau bij te komen.
Daarom staat er op de foto een oranje rand. EEN display: blok element zal er automatisch een marge omheen toevoegen als het niet de volledige horizontale ruimte beslaat.
Netjes verpakte T-shirts
Het grootste deel van je koffer zit waarschijnlijk vol met de rest van je kleding voor je reis. Eenvoudigheidshalve gaan we dit terugbrengen tot alleen T-shirts. Er is een groot debat op internet over de vraag of vouwen of rollen efficiënter is. Ik ben een opvouwbaar persoon.
Hoe dan ook, om de meeste items te passen, zet je je T-shirts naast elkaar. Dit is precies wat display: inline-blok is bedoeld voor. Deze elementen kunnen naast elkaar op dezelfde lijn zitten, maar ook naast display: inline elementen.
in tegenstelling tot display: inline elementen, een inline-blok element zal naar de volgende regel gaan als het niet in zijn contain past div naast elkaar inline-blok elementen. Om een T-shirt op de volgende rij te laten morsen, moet u het doormidden snijden en de resterende helft gebruiken om een nieuwe rij te beginnen. Inline-blok elementen mogen niet in tweeën worden gedeeld als ze niet op een regel passen.
De sokken die de gaten opvullen
Ga terug naar de originele HTML en je zult zien dat er één sokken zijn div> tussen de acht T-shirts. Maar kijk eens naar de horizontale weergave van de koffer aan de rechterkant. Als er een sokken zijn div>, hoe kan het de middelste rij beëindigen en de onderste rij beginnen? Dit is het doel van display: inline!
Een in lijn element zal overgaan naar de volgende regel als het de breedte van het div (op deze manier is het anders dan inline-blok of blok). Sinds onze sokken div zit vol sokken die lukraak in gaten worden gestopt, het kan gemakkelijk de opening aan de rechterkant van de middelste rij opvullen en overlopen om de onderste rij te beginnen.
Hiervoor hoeven geen sokken doormidden te worden geknipt. Dit is waarom ze kunnen worden in lijn, terwijl T-shirts alleen kunnen zijn inline-blok. Als de T-shirts op de middelste rij maar 60 procent van de breedte in beslag namen, de sokken div> zou omhoog gaan om de hele ruimte op de rest van de rij te vullen.
Goede reis
Dit is de laatste CSS voor onze koffer:
.delicate {display: block; breedte: 60%; } .tshirt {display: inline-block; breedte: 20%; } .socks {display: inline; }
Hier zijn een paar alternatieve scenario's om de verschillende toepassingen van weergave te illustreren. Als de delicatesse bovenop had display: inline-blok, pasten ze precies naast de T-shirts. Sommige T-shirts zouden naar de bovenste regel gaan en de rest zou zich dienovereenkomstig aanpassen. Links en rechts van het overhemd met kraag zou geen comfortabele buffer zijn.
Als elk T-shirt had display-blok, zou je een enorme stapel T-shirts op elkaar hebben liggen, één per regel. Als de sokken dat hadden display: inline-blok, ze zaten allemaal op de onderste rij in plaats van tussen de twee rijen te stromen. Sommige T-shirts zouden op een andere rij worden geschoven en zo een vierde rij vormen. Er zou een opening zijn aan de rechterkant van de middelste rij T-shirts.
Met de methode die ik hier heb geschetst, komen we uit op een netjes ingepakte koffer die optimaal gebruik maakt van de beschikbare ruimte.
Dit artikel is oorspronkelijk verschenen in net tijdschrift kwestie 289; koop het hier!
