Tartalom
Éjfél van, és az az egy div webhelyén még mindig úgy néz ki, mint egy gyermek játék ládája. Minden elem zűrzavaros, és minden alkalommal, amikor CSS-szel játszol kijelző vagyontárgyak, teljesen más hülyeségekké rendezik át magukat.
Ha olyan vagy, mint én, akkor valószínűleg megoldod ezt azzal, hogy az orrod alatt motyogsz, és következetesen agresszívebb leszel a billentyűzettel. És bár ez a stratégia már korábban is működött nálam, nemrégiben arra vállalkoztam, hogy jobb módot találjak a kijelző ingatlan.
Kiderül az alapjai kijelző sokkal egyszerűbbek, mint eredetileg gondoltam. Valójában ugyanazokat az elveket alkalmazzák, mint a bőrönd csomagolása. Letakarok kijelző: blokk, inline-block és Sorban. Ha korábban rendezett bőröndöt rendezett, látni fogja a párhuzamot. Ha az a fajta ember vagy, aki az összes ruhadarabot véletlenszerűen dörzsöli - nos, csak annyit tehetek érted.
Bőröndünk háromféle ruházatot tartalmaz:
- Finom, mint egy galléros ing
- Tekerhető pólók
- Hézagokba tömhető zokni vagy fehérnemű
Például, ha HTML-ben modelleztük a bőröndöt, a következőképpen néz ki:
div class = 'bőrönd'> div class = 'delicate'> / div> div class = 'póló'> / div> div class = 'póló'> / div> div class = 'póló'> / div> div class = 'póló'> / div> div class = 'zokni'> / div> div class = 'tshirt'> / div> div class = 'póló'> / div> div class = 'póló'> / div> div class = 'póló'> / div> / div>
A finom elemek a tetején
Kijelző: blokk az alapértelmezett a legtöbb HTML elemnél. Ez azt jelenti, hogy az elem a tartályában lévő teljes vízszintes helyet elfoglalja div. Ha más testvér elemek mellett van, akkor új sort kezd, és nem enged más vonalakat. Hasonló a kényes tárgyakhoz, amelyeket a bőröndje tetejére tett. Finom vagy okos cikkek ezek, például galléros ingek. Nem akarja, hogy ráncosodjanak, ezért ügyeljen arra, hogy ne nyomódjanak más ruhadarabokhoz.
Ez hozza fel az egyik legnehezebb részt kijelző: blokk. Figyelje meg, hogy a galléros ing nem foglalja-e el a bőrönd teljes szélességét? Ez nem azt jelenti, hogy más elemek a szintjére ugranak. Tegyük fel, hogy ez az ing a bőrönd szélességének 60 százaléka; akkor is megakadályozná, hogy más elemek csatlakozzanak a legfelsõbb szinthez.
Ezért van a képen narancssárga szegély. A kijelző: blokk elem automatikusan margót ad hozzá, ha nem foglalja el a teljes vízszintes teret.
Szépen csomagolt pólók
A bőröndöd nagy része valószínűleg tele van az utazás többi ruházatával. Az egyszerűség kedvéért ezt csak pólókra vágjuk. Az interneten nagy vita folyik arról, hogy a hajtogatás vagy a tekerés hatékonyabb-e. Összecsukható ember vagyok.
Egyébként annak érdekében, hogy a legtöbb cikk elférjen, egymás mellé állítja a pólóit. Pontosan ez az display: inline-block célja. Ezek az elemek egymás mellett ülhetnek ugyanazon a vonalon, valamint mellett kijelző: sorban elemek.
nem úgy mint kijelző: sorban elemek, an inline-block az elem a következő sorra lép, ha nem fér bele a tartalmába div a másik mellett inline-block elemek. Annak érdekében, hogy a póló a következő sorra ömljön, felére kell vágnia, és a fennmaradó felét új sor indításához kell felhasználnia. Inline-blokk az elemeket nem szabad kettéosztani, ha nem illeszkednek egy vonalra.
A hiányosságokat kitöltő zokni
Térjen vissza az eredeti HTML-re, és megjegyzi, hogy van egy zokni div> a nyolc póló között. Vessen egy pillantást a jobb oldali bőrönd vízszintes nézetére. Ha van egy zokni div>, hogyan fejezheti be a középső sort és kezdheti az alsó sort? Ez a célja kijelző: sorban!
An Sorban elem átkerül a következő sorra, ha túllépi a div (ily módon különbözik a inline-block vagy Blokk). Zoknink óta div tele van zoknikkal, amelyek véletlenszerűen résekbe vannak töltve, könnyen elkezdheti kitölteni a rést a középső sor jobb oldalán, és átfolyhat az alsó sor megkezdéséhez.
Nem kell zoknit félbevágni, hogy ez megtörténjen. Ezért válhatnak Sorban, míg a pólók csak inline-block. Ha a középső sor pólói csak a szélesség 60 százalékát tették ki, akkor a zoknit div> felfelé haladna, hogy kitöltse a sor többi részén található teljes helyet.
Jó utat
Ez a bőröndünk utolsó CSS-je:
.delicate {display: block; szélesség: 60%; } .tshirt {display: inline-block; szélesség: 20%; } .socks {display: inline; }
Íme néhány alternatív forgatókönyv a megjelenítés különböző felhasználásának szemléltetésére. Ha a tetején lévő finomságok megvoltak display: inline-block, illeszkednének közvetlenül a pólók mellé. A pólók egy része feljebb lépne a felső sorba, a többi pedig ennek megfelelően beállítaná. A galléros ingtől jobbra és balra nem lenne kényelmes ütköző.
Ha minden pólónak megvolt volna display-block, masszív pólód lenne egymás tetején, soronként egy. Ha a zokni volna display: inline-block, mindannyian az alsó sorban ülnének, nem pedig a két sor között áramlanak. Néhány pólót egy másik sorra tolnának, ezzel egy negyedik vonalat alkotva. A pólók középső sorának jobb oldalán egy rés lenne.
Az itt vázolt módszerrel egy szépen csomagolt bőrönddel végzünk, amely a lehető legjobban kihasználja a rendelkezésre álló helyet.
Ez a cikk eredetileg itt jelent meg net magazin 289. szám; vásárolja meg itt!
