Obsah
Je půlnoc a ta div na vašem webu stále vypadá jako dětská hračka. Všechny prvky jsou neuspořádaným nepořádkem a pokaždé, když hrajete s CSS Zobrazit majetku, přestavují se do úplně jiného kousku nesmyslu.
Pokud jste jako já, pravděpodobně to vyřešíte mumláním pod dechem a neustálým agresivnějším ovládáním pomocí klávesnice. A i když tato strategie pro mě již dříve fungovala, nedávno jsem se vydal hledat lepší způsob, jak porozumět Zobrazit vlastnictví.
Ukázalo se, že základy Zobrazit jsou mnohem jednodušší, než jsem si původně myslel. Ve skutečnosti používají stejné principy jako balení kufru. Jdu na krytí displej: blok, vložený blok a v souladu. Pokud jste dříve uspořádali kufr spořádaným způsobem, uvidíte rovnoběžku. Pokud jste ten typ člověka, který vám vrhá veškeré oblečení nahodile - dobře, mohu pro vás udělat jen tolik.
Náš kufr bude obsahovat tři druhy oblečení:
- Jemné, jako košile s límečkem
- Trička, která lze srolovat
- Ponožky nebo spodní prádlo, které lze nacpat do mezer
Pro srovnání, pokud bychom modelovali kufr v HTML, vypadalo by to takto:
div class = 'kufr'> div class = 'delikátní'> / div> div class = 'tričko'> / 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>
Jemné předměty nahoře
Displej: blok je výchozí pro většinu prvků HTML. To znamená, že prvek zabírá celý vodorovný prostor v kontejneru div. Pokud je vedle dalších sourozeneckých prvků, zahájí nový řádek a nepovolí další prvky na jeho řádku. Je to podobné jako s jemnými předměty, které jste vložili do horní části kufru. Jedná se o jemné nebo chytré předměty, jako jsou košile s límečkem. Nechcete, aby se pokrčily, takže dbejte na to, aby nebyly tlačeny proti jiným kusům oblečení.
To přináší jednu z nejtěžších částí displej: blok. Všimněte si, jak košile s límečkem nezabírá celou šířku kufru? To neznamená, že ostatní položky vyskočí na svou úroveň. Řekněme, že toto tričko je 60 procent šířky kufru; stále by blokovalo připojení dalších prvků na nejvyšší úrovni.
Proto je na obrázku oranžový okraj. A displej: blok prvek kolem něj automaticky přidá okraj, pokud nezabírá celý vodorovný prostor.
Úhledně zabalená trička
Většina vašeho kufru je pravděpodobně plná zbytku oblečení pro vaši cestu. Kvůli jednoduchosti to zkrátíme jen na trička. Na internetu probíhá velká debata o tom, zda je skládání nebo válcování efektivnější. Jsem skládací druh člověka.
Každopádně, aby se vešly co nejvíce položek, roztřídíte si trička vedle sebe. To je přesně to, co display: inline-block je určen pro. Tyto prvky mohou sedět vedle sebe na stejné lince i vedle display: inline elementy.
Na rozdíl od display: inline prvky, an vložený blok prvek se přesune na další řádek, pokud se nevejde do jeho obsahujícího div vedle druhého vložený blok elementy. Chcete-li, aby se tričko rozsypalo na další řádek, budete ho muset rozříznout na polovinu a zbývající polovinou začít novou řadu. Vložený blok prvky se nesmí rozdělit na polovinu, pokud se nevejdou na čáru.
Ponožky, které vyplňují mezery
Vraťte se zpět k původnímu kódu HTML a všimnete si, že je tu jedna ponožka div> mezi osmi tričky. Podívejte se ale na vodorovný pohled na kufr vpravo. Pokud existuje jedna ponožka div>, jak to může ukončit střední řádek a začít spodní řádek? To je účel display: inline!
An v souladu prvek přesáhne na další řádek, pokud přesáhne šířku div (tímto způsobem se liší od vložený blok nebo blok). Od našich ponožek div je plný ponožek, které jsou nahodile nacpané do mezer, může snadno začít vyplňovat mezeru na pravé straně střední řady a přelévat, aby začala spodní řada.
Aby k tomu došlo, nebude nutné snížit ponožky na polovinu. Proto se mohou stát v souladu, zatímco trička mohou být pouze vložený blok. Pokud trička ve střední řadě zabíraly pouze 60 procent šířky, ponožky div> by se posunul nahoru a zaplnil celý prostor ve zbytku řady.
Šťastnou cestu
Toto je poslední CSS pro náš kufr:
.delicate {display: block; šířka: 60%; }. tričko {display: inline-block; šířka: 20%; } .socks {display: inline; }
Zde je několik alternativních scénářů, které ilustrují různá použití displeje. Pokud měly jemné nahoře display: inline-blockby se vešly hned vedle triček. Některá trička by se posunula nahoru k horní linii a zbytek by se tomu přizpůsobil. Vlevo a napravo od košile s límečkem by nebyl pohodlný nárazník.
Pokud by každé tričko mělo blok displeje, měli byste na sobě obrovskou hromadu triček, jedno na řádek. Kdyby ponožky měly display: inline-block, všichni by seděli ve spodní řadě, než aby proudili mezi dvěma řadami. Některá trička by se natlačila na další řadu, čímž by se vytvořila čtvrtá řada. Napravo od střední řady triček by byla mezera.
U metody, kterou jsem zde popsal, skončíme s úhledně zabaleným kufrem, který nejlépe využije dostupný prostor.
Tento článek se původně objevil v síťový časopis číslo 289; koupit zde!
