Pokud jste v uplynulém desetiletí navrhovali pro web, jste nepochybně obeznámeni s majetkem CSS float . Vzhledem k tomu, že průmysl (naštěstí) přijal princip bezobslužných rozvržení, plavidla jsou zbraňou, kterou většina z nás používá k vytyčení našich webových stránek, ale je to nejlepší volba?
Navzdory popularitě této metody je pravidelně příčinou frustrace a zmatku pro nové designéry a stává se problémem, když jsou plovoucí prvky ponechány "neurčené". Tyto nevyplněné plováky mohou způsobit více problémů, od nedbalé estetiky až po nedostupnost. S malým projektem je poměrně jednoduché mít potíže s natáčením floatu, ale když pracujete na velké webové aplikaci s dynamickým obsahem, může to být trochu trickier, vyčerpávající drahocenný čas a náklady na peníze.
Dokonce i když jsou používány správně, plaváky mění normální průtok dokumentu, který může způsobit neočekávané chování a omezit možnosti stylingu. Vzhledem k tomu, že plovák není v "normálním průtoku", ne-umístěné blokové boxy vytvořené před a po plovoucím boxu proudí svisle, jako by plavidla neexistovala. S citlivým designem, kde jsou rozměry dynamické a tekoucí k vyplnění dostupného prostoru, je to zdaleka ne ideální. Co kdyby byla lepší cesta?
Flexbox je vzrušující budoucnost rozvržení webu, ale pro ty z nás, kteří musí podporovat starší prohlížeče, je to ještě vzdálený sen. Vlastnost zobrazení na druhé straně má plnou podporu a může poskytnout téměř všechny funkce rozložení plavidla bez nevýhod.
Vlastnost zobrazení v kombinaci s float a polohou určuje typ pole nebo polí, které jsou generovány pro prvek. Ve velmi jednoduché kostce elementy blokové úrovně rozprostírají celou šířku svého kontejneru a vynucují všechny další prvky k dalšímu řádku, zatímco elementy na úrovni roviny pokrývají pouze šířku jejich obsahu, což dovoluje, aby kterýkoli prvek rovinné úrovně proudil vedle něj na stejném čára.
Použití zobrazení: inline-block k prvku generuje kontejner s blokem inline. Přemýšlejte o textu v tagu. Jsou všechny navzájem "vložené", zatímco samotný štítek je kontejner na úrovni bloku. Tím, že chápeme toto chování, můžeme použít vlastnost zobrazení pro vložení našeho obsahu vedle sebe. Vzhledem k tomu, že všechny naše prvky zůstávají v normálním toku, nemáme žádné problémy se zhrouceným rodičovským prvkem. Podle mého názoru je to mnohem čistší řešení, které stále dosahuje požadovaného výsledku.
Viz pero Inline-block přes plováky davidicus na CodePen.
Tato metoda funguje prakticky kdekoli, kde by plavidlo běžně používalo. Podívejme se na klasické rozložení hlavního / postranního pruhu. Pro HTML máme obalový prvek se dvěma podřízenými elementy uvnitř takto:
Naše CSS:
.wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}Právě tak máme k dispozici hlavní obsah a boční lištu.
Směr "plováku" je určen textovým zarovnáním obalu div. Vzhledem k tomu, že jsme nezměnili výchozí zarovnání, nemuseli jsme nic dělat. Nicméně byste jej mohli snadno nastavit do středu nebo vpravo pro dosažení některých rozvržení, které nejsou dokonce možné s plováky (více o tom později). Všimněte si komentáře "bez mezery" mezi dvěma dětskými divy kontejneru .wrapper . To je důležité si uvědomit, a důvodem pro to je to "con" o této metodě.
Vraťme se zpět k příkladu značek. Při psaní textu v html je celý bílý prostor zabalen do jediného znaku bílé mezery bez ohledu na to, kolik mezer ve vašem dokumentu HTML máte. Takže všechny mezery, které máte mezi vaší "floated" prvky v označení, se skutečně zapíšou jako mezery mezi nimi v prohlížeči, stejně jako náš text odstavce. To samozřejmě způsobí, že vaše kalkulace velikosti nebudou klepnutím posledního prvku do další úrovně stránky. Žádné bueno! Naštěstí pro nás existuje několik řešení, jak tento malý problém řešit. Jako:
Odeberte prostor mezi prvky ve svém HTML, čímž vyjmete prostor z rovnice. Udělal jsem to na chvíli, ale vypadalo to jen nedbalo a bylo těžší číst.
Přidáním komentáře HTML mezi prvky se také odstraní znak místa jako v našem příkladu. Toto je mé nejvhodnější řešení . Zvýrazněný text ve většině textových editorech je takový, že kontrast mezi poznámkou a prvky je dostatečný k výraznému zlepšení čitelnosti vaší značky. To vám také umožní zachovat správné odsazení samotného prvku.
Možná si myslíte: "To je dobré a všechno, ale proč bych změnil metodu, která pro mě funguje dobře?" No, i když jste plovák, existují určité věci, které prostě nemohou udělat. Například:
Nepolapitelný "středový plovák", který je často žádoucí, vyžaduje další značení a několik CSS vlastností k dosažení. Pomocí metody zobrazení je to jednoduše provedeno použitím textu-align: center na obal.
Největší výhodou výběru způsobu zobrazení je možnost vertikálního přizpůsobení obsahu. Jak často jste chtěli soustředit nějaký prvek na svého sourozence? Můžete použít polohu s negativním okrajem / překládat trik, ale opět s citlivým, dynamickým prostředím to není lepší. Namísto toho použijte vertikální zarovnání: střední; bude perfektně vycentrovat vaše prvky pokaždé, aniž byste museli pracovat na vaší straně. (Viz pero Inline-block přes plováky davidicus na CodePen.)
Ve skutečnosti neexistuje "jedna velikost pro všechny", pokud jde o web design a opravdu se snižuje na osobní preference. Stále používám plováky v určitých situacích a někdy je opravdu nejlepším nástrojem pro práci. Myslím, že existuje jistá výhoda při používání metody zobrazení. Z mých zkušeností jsem zjistil, že je to nejlepší, nejméně chybná metoda pro řešení rozložení. Pro ty z vás, kteří by chtěli tuto metodu prozkoumat více, jsem vytvořil mřížku "Jen řekni, že neplovává": Inline-block Grid s SASS na CodePen.
Doporučený snímek / náhled, zhroucená zeď přes Chris Cotterman