Inhalt
Et ass Mëtternuecht, an deen div op Ärem Site nach ëmmer ausgesäit wéi d'Spillkëscht vun engem Kand. All d'Elementer sinn e geballte Mess, an all Kéier wann Dir mat CSS spillt uweisen Propriétéit, si reegelen sech selwer an e ganz anere Quatsch.
Wann Dir wéi ech sidd, da wäert Dir dëst wuel léisen andeems Dir ënner Ärem Otem bréngt a konsequent méi aggressiv mat Ärer Tastatur gëtt. An och wann dës Strategie fir mech scho geschafft huet, hunn ech mech viru kuerzem opgestallt fir e bessere Wee ze fannen fir de uweisen Propriétéit.
Et stellt sech eraus d'Grondlage vun uweisen si vill méi einfach wéi ech ursprénglech geduecht hunn. Tatsächlech benotze se déiselwecht Prinzipien wéi e Koffer packen. Ech ginn ofdecken uweisen: blockéieren, inline-blockéieren an an der Schlaang. Wann Dir e Koffer uerdentlech uerdentlech arrangéiert hutt, gesitt Dir d'Parallel. Wann Dir déi Zort Persoun sidd, déi all Är Kleeder op eng zoufälleg Manéier rammt - gutt, do kann ech nëmmen esou vill fir Iech maachen.
Eis Valise enthält dräi Zorte Kleeder:
- Delikater, wéi e Kraangshemd
- T-Shirten déi opgerullt kënne ginn
- Strëmp oder Ënnerwäsch, déi a Lücken verstoppt kënne ginn
Als Referenz, wa mir d'Koffer an HTML modelléiert hunn, géif et esou ausgesinn:
div class = 'suitcase'> 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>
Déi delikat Artikelen uewen
Affichage: blockéieren ass de Standard fir déi meescht HTML Elementer. Dat heescht datt d'Element de ganze horizontalen Raum am Container besetzt div. Wann et niewent anere Geschwësterelementer ass, fänkt et eng nei Zeil un, an erlaabt net aner Elementer op hirer Linn. Et ass ähnlech wéi déi delikat Saachen déi Dir uewen an Ärem Koffer setzt. Dëst sinn delikat oder schlau Artikele wéi Collared Hiemer. Dir wëllt net datt se gekraazt ginn, sou datt Dir sécher sidd datt se net géint aner Kleedungsstécker gedréckt ginn.
Dëst bréngt ee vun den haardsten Deeler vun uweisen: blockéieren. Notiz wéi de Collared Shirt net déi ganz Breet vum Koffer beschäftegt? Dat heescht net datt aner Elementer op säin Niveau sprange wäerten. Loosst eis soen datt dëst Shirt 60 Prozent vun der Breet vum Koffer ass; et géif ëmmer nach aner Elementer blockéieren fir matzemaachen um Topniveau.
Dofir ass eng orange Grenz am Bild. A uweisen: blockéieren Element gëtt automatesch eng Margin derbäi wann et net de ganzen horizontalen Raum besetzt.
Flott verpaakt T-Shirten
Déi meescht vun Ärer Valise ass méiglecherweis voll mat dem Rescht vun Äre Kleeder fir Är Rees. Zum Wuel vun der Einfachheet wäerte mir dëst op just T-Shirten erofschneiden. Et gëtt eng grouss Debatt um Internet, ob Fold oder Rolling méi effizient ass. Ech sinn eng ausklappbar Aart Persoun.
Jiddefalls, fir déi meeschten Artikelen ze passen, riicht Dir Är T-Shirts niewenteneen. Dëst ass genau wat uweisen: inline-block heescht fir. Dës Elementer kënnen niefteneen op der selwechter Linn sëtzen, souwéi nieft anzeginn: inline Elementer.
Anescht wéi anzeginn: inline Elementer, an inline-blockéieren Element plënnert op déi nächst Zeil wann et net a seng enthält passt div nieft deem aneren inline-blockéieren Elementer. Fir en T-Shirt op déi nächst Zeil ze spillen, musst Dir en an d'Halschent schneiden an déi reschtlech Halschent benotze fir eng nei Rei ze starten. Inline-Block Elementer däerfen net an der Halschent gedeelt ginn, wa se net op eng Linn passen.
D'Socken déi d'Lücken ausfëllen
Kuckt zréck op d'original HTML an Dir bemierkt datt et eng Strëmp gëtt div> tëscht den aacht T-Shirten. Awer kuckt d'horizontal Vue vum Koffer op der rietser Säit. Wann et eng Strëmp gëtt div>, wéi kann et déi mëttelst Zeil ophalen an déi ënnescht Zeil ufänken? Dëst ass den Zweck vun anzeginn: inline!
An an der Schlaang Element wäert op déi nächst Zeil iwwergoen wann et d'Breet vun der div (op dës Manéier ass et anescht wéi inline-blockéieren oder blockéieren). Zënter eis Strëmp div ass voller Strëmp déi zoufälleg a Lücken ausgestoppt sinn, et kann einfach ufänken d'Lück op der rietser Säit vun der Mëttelrei ze fëllen an iwwerflësseg fir déi ënnescht Zeil unzefänken.
Kee Socken mussen an d'Halschent geschnidde ginn fir datt dëst geschitt. Dofir kënne se ginn an der Schlaang, wärend T-Shirts nëmme kënne sinn inline-blockéieren. Wann d'T-Shirts op der mëttlerer Zeil nëmmen 60 Prozent vun der Breet opgeholl hunn, d'Socken div> géife réckelen fir de ganze Raum op de Rescht vun der Zeil ze fëllen.
Gutt Rees
Dëst ass de leschte CSS fir eis Valise:
.delicate {display: blockéieren; Breet: 60%; } .tshirt {uweisen: inline-block; Breet: 20%; } .Socks {uweisen: inline; }
Hei sinn e puer alternativ Szenarien fir déi verschidden Uwendungsanwendungen ze illustréieren. Wann d'Delikaten uewen haten uweisen: inline-block, si géifen direkt nieft den T-Shirte passen. E puer vun den T-Shirte géife sech op déi iewescht Linn réckelen, an de Rescht géif sech deementspriechend upassen. Et wier kee gemittleche Puffer lénks a riets vum Collared Shirt.
Wann all T-Shirt hätt Display-Block, hätt Dir e massive Stack vun T-Shirten openeen, ee pro Zeil. Wann d'Socken hätten uweisen: inline-block, si sëtzen all op der ënneschter Zeil amplaz tëscht deenen zwou Reien ze fléissen. E puer T-Shirte géifen op eng aner Rei gedréckt ginn, a bilden eng véiert Linn. Et wier e Lach op der rietser Säit vun der mëttlerer Rei vun T-Shirts.
Mat der Method, déi ech hei duergestallt hunn, komme mir mat enger propper gepackte Koffer op, déi déi verfügbar Plaz benotzt.
Dësen Artikel erschéngt ursprénglech am Netz Magazin Ausgab 289; kafen et hei!
