Vi har använt flottor för layout ganska mycket eftersom vi lämnade tabeller bakom. Det är en udda lösning som ofta kan orsaka problem, men om du vet vad du gör fungerar det.
Ett intressant alternativ att flyta som människor vänder sig till mer och mer på senare tid är att ställa in visa värdet av ett element till inline-blocket. Vad gör det här exakt? Hur är det som en flottör? Hur är det annorlunda? Låt oss dyka in och se vad vi kan upptäcka.
Displayegenskapen
Webbläsare gör olika element på olika sätt. Vissa element är blocknivå, vilket betyder att deras standard visa värdet är inställt på blockera. Blockelement har en definierbar bredd och höjd och skapar automatiskt en ny rad i layouten när de är skapade.
Ett exempel på ett blocknivåelement är en paragraf. Om jag kasta två stycken i ett HTML-dokument, stack de ovanpå varandra istället för att visas sida vid sida. Jag har mycket frihet över sina dimensioner och kan verkligen behandla dem som enskilda byggstenar för att formas som jag vill.
Andra element har sina visa värdet satt till i kö som standard. Det betyder att de inte har en definierbar höjd och bredd och kommer inte att skapa nya rader i en layout (sålunda visas de? Inline?). Inline-element är i allmänhet den typ av sak som du ställer in inom ett stycke eller annat blocknivåelement: stark, em, ankare etc.
Det här händer om jag kasta en massa ankare-taggar i ett HTML-dokument. Till skillnad från ovanstående stycken, som automatiskt stackar, skapas dessa element sida vid sida. Deras bredd och höjd bestäms av innehållet som de innehåller och kan inte överskridas manuellt som med blocknivåelementen.
Det finns några andra grundläggande visa standardvärden som du förmodligen är bekant med. Till exempel objekt i huvud del har en display egenskap av ingen.
Ange ditt eget visningsvärde
En riktigt intressant egenskap hos CSS är möjligheten att ändra elementets standardvisningsbeteende. Även om ett standardbeteende redan är inställt för ett visst element, kan vi åsidosätta det för våra egna ändamål.
Till exempel kan vi enkelt ta de inline ankare taggarna från det andra exemplet ovan och få dem att fungera mer som blocknivåns stycken från det första exemplet. Vi ställer här inställningsegenskapen till blockera i vår CSS.
Nu fungerar våra ankare-taggar som blocknivåer, så varje skapar en ny linje och kan ha ett anpassat höjd / breddvärde som tillämpas.
Som du kan tänka dig är det svårare att arbeta med omvändet av det här exemplet genom att ta ett blocknivåelement och ställa in visa värde till i kö. Instinktivt kan du använda display: inline för att försöka göra de två styckena ovan visas sida vid sida, men när du gör det här är resultatet istället att de två flyter ihop till ett enda stycke.
Vi har nu förlorat all förmåga att ställa in vår bredd och höjd så att de två styckena är oupphörligt integrerade, vilket inte alls är vad vi skulle göra för.
Flytande element
Så vad händer om vi vill att de två styckena ovan ska förbli åtskilda men visas sida vid sida som enskilda kolumner istället för staplade i rader? Det typiska svaret som många av oss har vänt på i åratal är flytande. Genom att använda? Float: left? till punkterna kan vi behålla funktionen på blocketivå samtidigt som du skapar flera kolumner innehåll.
Floats kommer med lite intressant beteende. Exempelvis har flytande föremål en tendens till att kollapsa sin förälderbehållare, vilket leder till alla typer av röriga problem om du tillämpar bakgrundsfärger eller gränser. För att komma runt detta har vi några knep. Vi kan antingen rensa flottörerna på ett nytt element (dessa dagar är det ofta ett pseudoelement) i slutet av behållaren eller användning overflow: auto på föräldern. Båda fixarna har sina försiktighetsåtgärder, men om du vet hur du kan hävda varje ordentligt kan du vanligtvis dra av alla layouter utan alltför mycket besvär.
display: inline-block
Det finns massor av värden för visningsegenskapen bortom vad vi redan har nämnt, varav några är användbara, andra som jag tvivlar på att du någonsin kommer att använda. Ämnet för dagens diskussion är överlägset en av de mest intressanta och användbara i gänget: inline-blocket.
Titta på vad som händer när vi tar våra två stycken från det ursprungliga exemplet ovan och tillämpa a visa värdet av inline-blocket.
Ser mycket ut som en flottör rätt? Så vad händer om vi lägger till i en föräldercontainer? Har det det kollapsande problemet som vi såg med flottor? Nej! Allt fungerar precis som vi förväntar oss av det.
Vad som händer här är att vi berättar för webbläsaren att visa stycken inline, men låter dem behålla sina blocknivåegenskaper. Det betyder att vi kan ställa in bredd och höjd manuellt och att de två elementen förblir distinkta, men också att de visas bredvid varandra i dokumentflödet. Ganska smidig!
Justeringsproblemet
På ytan, inline-blocket kan verka som den layoutredigerare du har väntat på. Vem vill röra med ruttiga clearfixhackar när du kan hoppa över det helt med den här metoden? Det visar sig att floats inte är den enda layoutmetoden med quirks, inline-blocket har också en del konstig funktionalitet som du måste sätta i huvudet runt.
En av de första sakerna som du flyter och inline-block ser ganska annorlunda ut när du har flera element med olika höjder. Till exempel, här är vad som händer när du flyter en massa stycken till vänster:
Nu är det som händer när du använder inline-block för att dra av samma sak. Lägg märke till att nedre kanterna i styckena är inriktade i stället för toppen som i föregående bild.
Lyckligtvis är detta inte ett stort problem. För att lösa problemet, se till att du ställer in vertikal-align egendom till topp.
Whitespace-utgåvan
Det finns en annan viktig plats att inline-blockets beteende skiljer sig från flottor. Jag finner det märkligt att allt i HTML och CSS kan vara medveten om när det gäller layout, men det är precis vad vi hittar här. Tänk på följande exempel.
Här kan vi se att när en grupp listartiklar flyttas slår de sig ihop mot varandra, som vi kan förvänta oss, vilket gör det möjligt för oss att manuellt ställa in gapet utan något oväntat extrautrymme. Men när vi gör detsamma med inline-blocket finns det lite standardutrymme som inte ens går bort om vi ställer in våra marginaler till 0.
Som du kan se är en lösning att ta bort vitsytan i vår HTML och trycka elementen upp mot varandra. Återigen finner jag det här ganska förvirrande men det fungerar. En alternativ lösning som ger samma resultat utan att skryta med den visuella hierarkin i din HTML är att tillämpa en marginal på -4px på listobjekten.
Browser Support
Nu när vi vet vad inline-block är och hur det fungerar annorlunda än att flyta, är det dags att diskutera alles favoritämne: webbläsarstöd. Vilka grymheter måste vi påbörja för att se till att denna teknik faktiskt fungerar över hela linjen?
När vi slutar med CanIUse.com för att se svaret är resultaten troligen mycket bättre än vad du skulle ha förväntat dig.
Här kan vi se att vi har åtminstone delvis stöd över hela linjen och fullt stöd för allt utom IE7 och äldre (feigned shock and awe). Anteckningen längst ner informerar oss om att inline-block bara stöds i IE6 och IE7 på element med en skärm av inline som standard.? Det betyder att de styckexemplar som vi har använt alla under hela den här artikeln är ute.
Lyckligtvis har Mozilla bloggen lagt upp några korrigeringar för den här vägen tillbaka 2009. För att få IE att spela snyggt, behöver vi bara utlösa hasLayout med zoomegenskapen och sedan använda stjärnhacken för att rikta IE6 / 7 och ställa in skärmen till inline . Detta gör att du kan funktionellt behandla inline-elementen som om de var inline-blockelement. Det är verkligen inte söt, men det blir jobbet gjort.
Vidare läsning
Om du vill lära dig mer om inline-block, här är några artiklar som jag tyckte var särskilt användbara i min forskning.
- Float vs Inline-Block
- Vad är Inline-Block?
- inline-block: Massor av exempel
- Inline-block för cross-browser
En bättre lösning?
För att vara ärlig har jag aldrig riktigt spelat med inline-block för mycket innan idag, men jag har sett fler och fler förslag i kommentarerna som jag utforskar denna metod som ett alternativ till flottor så jag trodde att jag skulle ta rådet. Jag var hoppfull att gå in i den, att det verkligen var lite magiskt, inget problem alls, men det var verkligen inte sant. Det finns fortfarande flera oväntade beteenden som du måste veta om och svara på, vilket resulterar i en viss hacky-kod, som vi ofta ser med float clearing-korrigeringar.
För att vara rättvist är det faktiskt ett ganska enkelt sätt att åstadkomma floatliknande layouter. Ännu viktigare är att CSS som du måste implementera för att se till att det är kompatibelt med webbläsaren är briefer än det populära micro clearfixhacket från Nicolas Gallagher. Detta kan göra det till ett bättre sätt att gå till många projekt.
I slutändan tror jag att jag faktiskt börjar lägga till den här metoden till min väska med tricks. Jag misstänker att vissa tider kommer att uppstå när flottör inte är idealiska (exempel: rätt floats gör allt omvänd) och det här är ett bra alternativ att ha i dessa situationer.
Vad tror du? Är inline-block ett bra alternativ till flottor? Vilka situationer kan du tänka på var man tydligt har en fördel över den andra?