Innehåll
Det är midnatt, och den där div på din webbplats ser fortfarande ut som ett barns leksakskista. Alla element är en rörig rörelse, och varje gång du spelar med CSS visa egendom, omorganisera de sig till en helt annan bit av nonsens.
Om du är som jag kommer du förmodligen att lösa detta genom att muttras under andan och bli konsekvent mer aggressiv med tangentbordet. Och även om den strategin har fungerat för mig tidigare, satte jag mig för att hitta ett bättre sätt att förstå visa fast egendom.
Det visar sig grunderna i visa är mycket enklare än vad jag ursprungligen trodde. De använder faktiskt samma principer som att packa en resväska. Jag täcker display: blockera, inline-block och i kö. Om du har ordnat en resväska på ett ordnat sätt tidigare ser du parallellen. Om du är den typ av person som ramlar alla dina kläder på ett slumpmässigt sätt - ja, det är bara så mycket jag kan göra för dig.
Vår resväska kommer att innehålla tre typer av kläder:
- Ömtåliga, som en krage skjorta
- T-shirts som kan rullas upp
- Strumpor eller underkläder som kan stoppas i luckor
Som referens, om vi modellerade resväskan i HTML, skulle den se ut så här:
div class = 'resväska'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
De känsliga föremålen på toppen
Display: blockera är standard för de flesta HTML-element. Det betyder att elementet upptar hela det horisontella utrymmet i sin behållare div. Om det är bredvid andra syskonelement startar det en ny rad och tillåter inte andra element på sin rad. Det liknar de känsliga föremålen du lägger högst upp i resväskan. Dessa är känsliga eller smarta artiklar som krage skjortor. Du vill inte att de ska bli skrynkliga, så se till att de inte skjuts upp mot andra kläder.
Detta tar upp en av de tuffaste delarna av display: blockera. Lägg märke till hur den krage skjortan inte upptar hela resväskans bredd? Det betyder inte att andra objekt kommer att hoppa upp till sin nivå. Låt oss säga att den här skjortan är 60 procent av resväskans bredd; det skulle fortfarande hindra andra element från att gå med på toppnivån.
Det är därför det finns en orange kant på bilden. A display: blockera elementet lägger automatiskt till en marginal om den inte upptar hela det horisontella utrymmet.
Snyggt packade T-shirts
Det mesta av din resväska är förmodligen full av resten av dina kläder för din resa. För enkelhetens skull kommer vi att klippa ner detta till bara T-shirts. Det finns en stor debatt på internet om vikning eller rullning är effektivare. Jag är en hopfällbar person.
Hur som helst, för att passa de flesta artiklarna, raderar du dina T-shirts sida vid sida. Det är precis vad display: inline-block är avsedd för. Dessa element kan sitta bredvid varandra på samma linje, liksom bredvid display: inline element.
Till skillnad från display: inline element, en inline-block elementet kommer att flytta till nästa rad om det inte passar in i dess innehållande div tillsammans med den andra inline-block element. För att få en T-shirt att släppas till nästa rad måste du klippa den på mitten och använda den återstående halvan för att starta en ny rad. Inline-block element får inte delas i hälften om de inte passar på en linje.
Strumporna som fyller i luckorna
Gå tillbaka till den ursprungliga HTML-koden så märker du att det finns en strumpa div> mellan de åtta T-tröjorna. Men ta en titt på resväskans horisontella vy till höger. Om det finns en strumpa div>, hur kan den avsluta den mellersta raden och börja den nedre raden? Detta är syftet med display: inline!
Ett i kö elementet kommer att spridas till nästa rad om det överstiger bredden på div (på detta sätt skiljer det sig från inline-block eller blockera). Sedan våra strumpor div är full av strumpor som slumpmässigt är fyllda i luckor, det kan lätt börja fylla luckan på höger sida av mittraden och spridas över för att börja den nedre raden.
Inga strumpor behöver klippas i hälften för att detta ska hända. Det är därför de kan bli i kö, medan T-shirts bara kan vara inline-block. Om T-tröjorna på mittraden bara tog upp 60 procent av bredden, strumporna div> skulle flytta upp för att fylla hela utrymmet på resten av raden.
Trevlig resa
Detta är den sista CSS för vår resväska:
.delicate {display: block; bredd: 60%; } .tshirt {display: inline-block; bredd: 20%; } .socks {display: inline; }
Här är ett par alternativa scenarier för att illustrera olika användningsområden för skärm. Om delikatesser på toppen hade display: inline-block, de skulle passa in bredvid T-tröjorna. Några av T-tröjorna skulle flytta upp till den översta raden, och resten skulle anpassa sig därefter. Det skulle inte finnas någon bekväm buffert till vänster och höger om krage skjortan.
Om varje T-shirt hade display-block, skulle du ha en massiv stack med T-shirts ovanpå varandra, en per rad. Om strumporna hade display: inline-block, de skulle alla sitta på den nedre raden i stället för att flyta mellan de två raderna. Vissa T-shirts skulle tryckas på en annan rad och bilda en fjärde rad. Det skulle finnas en lucka till höger om den mellersta raden av T-shirts.
Med den metod som jag har beskrivit här slutar vi med en snyggt packad resväska som bäst utnyttjar det tillgängliga utrymmet.
Denna artikel uppträdde ursprungligen i nätmagasin utgåva 289; köp det här!
