Gyönyörű igazítás rács gumitömbök
Abban bevezetését gumi lapok gyakran van egy probléma, hogy létrejöjjön az azonos típusú egységek (például az áru a katalógusban vagy képek a galériában) a rajtrácson, mint egy asztal, de rugalmas, egy ismeretlen az oszlopok számát. Egyszer régen az egyetlen módja annak, hogy ez volt az úszó. és blokkolja kellett nyomni a bal oldalon. Az inline-block ezt a problémát meg lehet oldani egyszerűbben és rugalmasabban egységek különböző magasságúak, és a különböző függőleges helyzettől. De valahogy ezek a modellek a tömeg még mindig igazodik a bal oldalon. Úgy tűnik, mi akadályozza a központtól a rács, ha nem nyúlik szélességében szabad térben c via text-align: center vagy igazolása megfelelően?
A probléma merül fel, az utolsó sorban, amelyen vízszintes rács ritmus leszáll. De kiderült, hogy ez a probléma is megoldható!
Kezdeni, azt javasoljuk, hogy megvitassák ezt a kérdést részletesen. Lásd a példákat, hogy mi történik mögötte az a baj, az utolsó sorban a rács, valamint hogy meghatározzák, mi várjuk az eredményt.
A probléma nagyon hasonló mindkét esetben, tehát választani tulajdonsága a két, például text-align: center. És azt is használja a felsorolás.
Nincs semmi szokatlan a rend. A szokásos lista az összes régi jó elemeket, inline-block (kijelzőn. Inline-block) szinten. Talán a legérdekesebb dolog, ami kiemelkedik text-align: center. ami miatt van a mi vízszintes igazítás.
Míg a terméket egy sorban, úgy néz ki, mint ezt.
De ha egyszer a pályán van az utolsó sorban, az egységek száma, amely kevesebb, mint az előző sorokat, megkapjuk a következő.
Úgy tűnik, hogy túl rossz, minden úgy történik, ahogy kell történnie. Az utolsó sort, ugyanúgy, mint a korábbiak - igazodik a közepén. De ez az összehangolás és létrehoz nekünk egy probléma. A blokkok közepén helyezkedik el, ami az oldalán egy csomó felesleges és üres tér. Ha például az utolsó sorban ott csak egy blokkot, akkor ez még inkább teret, és az egység fog lógni a közepén, mint egy számkivetett egy üres telken.
És most vessünk egy pillantást, ezért akart.
Amint az ábrából látható, a két elem az utolsó sor bal széléhez, annak ellenére, hogy a vonal szélessége egyértelműen nagyobb, mint a teljes szélessége a blokkokat. Ez látható a jobb oldalon, a szabad tér, amely esetében kétharmados tagunk. Ez a viselkedés blokk van szükségünk, hogy egy eredményt. Ie alapvetően annak biztosítása, hogy az összehangolás az elemek szép volt, épül pontosan a rács (akár gumi), függetlenül attól, hogy azok számát és fehér sáv az utolsó sorban. Más szóval, meg kell semmilyen módon nem befolyásolja a viselkedését az utolsó sorban, arra kényszerítve őt, hogy tartsa be a szabályokat.
Hogyan működik ez?
Mielőtt közvetlenül a megoldást a problémára, nézzük először algotitm Nézzük működését tulajdonságok, mint a text-align: center és igazolják. Ez segít, hogy jobban megértsük, mi történik a rács, a viselkedését, és hogyan a munkát végzik ezeket a tulajdonságokat az utolsó sort.
text-align: center
Kezdjük talán a text-align: center. Meg lehet osztani három fő szakaszból áll.
Az első szakasz
A sor elejére kerül sor. Számított teljes szélessége szavak vagy megbonthatatlan blokkok (inline-blokk. Img. Etc) a sorban. Továbbá, ha ezeket a blokkok közötti tényleges hézagok vagy bemélyedések, amelyek készült útján például szövegszerkesztő-térköz, és más, ezeket a távolságokat is adunk a teljes szélességét a blokkokat.
második szakasza
Ebben a szakaszban még mindig könnyebb. Számított fennmaradó vonalvastagság, azaz az összes szabad helyet, amely nem szerepel az összeg a teljes szélessége szavak azok közötti távolság szó.
A harmadik szakasz
Nos, az utolsó szakaszban, a következő történik. A legelső sorban platform a levelet jobbra mozog pontosan a fele a kapott eredmény a lépés után a két számot. Mi ez ad teljesen egyenlő árrés a jobb és bal oldalán a húr is.
Ahhoz, hogy megértsük, hogyan történik, tettem egy különleges rajz.
Mielőtt érintkezési felületet, amely ábrázolja egy tartályt, két sorban, a szélessége, ami 500px.
Tehát láthatjuk, hogy az összeg az összes blokkot az első sorban azok időközönként egyenlő 370px. Így a harmadik szakaszához algoritmus kivonjuk az első a második (500-370), amely adott eredményeképpen 130. Továbbá, amint azt már említettem, osztottam az összeg pontosan fele (130/2) és tolta vissza a legelső egység a jobb oldalon, az eredményt (65px). Így a egységei voltak pontosan a közepén, béléssel oldalán lesz pontosan ugyanaz. Ha az első sorban nincs elég hely, a legtöbb szélsőjobboldali bloc lenne költözött a második sorban, és az algoritmus újra be kell vonni az ügyben.
Ugyanez vonatkozik a második sorban. Ez algoritmus működik, ugyanúgy, sőt, látható, hogy az oldalsó bemélyedések benne minősül törtszámok (132.5px), mivel a text-align: center osztja a teljes szélessége a blokkok azok időközönként pontosan 2, mint mondtam.
Elvileg semmi bonyolult, minden érthető és logikus. Esetünkben, fontos megérteni, hogy ha a készülék egyedül marad az utolsó sorban, van igazítva pontosan középen rovására számított szabad hely a jobb oldalon. És pontosan ez az, amit mi, és nem szabad megengedni.
text-align: indokolják
A mechanizmus a text-align: indokolják. Már leírt egyik cikkében. Ismételt nincs értelme, úgyhogy javasoljuk, hogy kövesse a hivatkozást, és olvassa el figyelmesen mindent az algoritmus és mérföldköveket text-align: indokolják.
Az egyetlen dolog, amit szeretnék megemlíteni, hogy ...
Az utóbbi vonal nem jön a figyelmet indokolja. mivel csak akkor működik teljesen kitöltött sorok, és az utolsó sorban a hiányosságok mindig is a normál méretű.
Igen, pontosan. text-align: indokolják ellentétben text-align: center nem hajlandó együttműködni az utolsó sort, és ezért indokolt összeigazításig.
Tehát ez is egy része a vámokat, vagyis, hogy tétlen algoritmus működését, és az utolsó sorban.
Ami a jövőt illeti meg egyszer, és azt fogja mondani, hogy a döntés mindkét esetben teljesen azonosak, így nincs értelme elemezni mindegyikük külön-külön. Szóval úgy gondolja, hogy már abban a pillanatban.
Tehát lényegében, van két ingatlan text-align: indokolják, és a központ. amelyek mindegyike illeszkedik egy sor saját algoritmus. És mint már tudjuk, hogy a text-align: center működik az utolsó sorban, de text-align: indokolják - nem. De tudjuk, hogy ha egy vonalat, amelyen túl jön a következő (mondjuk utolsó) teljesen fel van töltve, akkor ezek a tulajdonságok összehangolni a rács szerint a szabályokat. És akkor is, ha a szélessége a gumi tartály tele van olyan vonal fog viselkedni, mint szeretnénk.
Milyen következtetést vonhatunk le ebből? És hogyan lehet kapcsolódnak ezek a dolgok az utolsó sort, ami lehet csak az egyik egység? A válasz egyszerű. Meg kell, hogy kitaláljuk, hogyan kell kitölteni az utolsó sorban azért, hogy a fennmaradó teljes szélessége a tér blokkok tele voltak valami, és nem csak, hogy ez a „valami” lehet mozgatni a következő sorba, annak érdekében, hogy a tulajdonságok dolgoztak hibátlanul.
Tehát, hogy töltse az utolsó sort fogunk használni, egy ál-generált segítségével: miután. Ez egy jó lehetőség, mivel ez segít megoldani a problémát, és megszabadulni a felesleges hulladékot a jelölést. Alapértelmezés szerint ál-előállító egység vonal, ami azt jelenti, hogy pontosan mire van szükségünk. Mivel inline-block lesz egy nagy, töretlen írni, és nem lehet osztani több „tégla”, amely nem vezet semmi Putney. Nos, a blokk azonnal vegye külön sorban, és mint inline-block - nem hoz eredményt. Ezekkel az értékekkel, mi a helyzet a következőképpen néz ki.
Mint látható a képen, a kiegészítő egység azonnal vett egy új sort, így a korábbi (az utóbbi tény), hogy betartják a szabályokat az algoritmus. Néhány pozitív eredményt nem lehet elérni olyan módon is, ha még nem próbálta, ezért elutasítjuk ezeket a dolgokat, és megy ez a döntés ...
Az előzőekből is értem, hogy mi a helyzet, segíthetünk elem, nevezetesen a vonal (inline) szinten, azaz normál állapotba. inline + sor szöveg, a szóköz a szavak között.
Igen, nagyon hasonló. Pillanatkép a világos vonal egység, továbbá, hogy hatással lehet az utolsó sorban, így is szenvedett a következő nem teljesen elhagyja az előző sor oszthatatlan szót. Ily módon nyilvánvaló, hogy ez egy kicsit nem egészen a blokk szélessége (100px) szélességű, és ha ez elmarad, akkor talán jönne ki, és nem valami értékes.
Általában kísérletezik egy ideig vysheskazannnym, a fény született meg a következő megoldás.
Nagy! A rács van igazítva, ahogy kell. Azonnal azt fogja mondani, hogy az ilyen összehangolás kapott bármely képernyőszélessége, amely nem tud, de örül. És most a lényege.
Tehát van egy string "i i i i i i i i". álló betűk és tereket, de ez nem egyszerű alakú betűk és terek, mint amilyennek látszik első pillantásra. Először a levélben is én nem véletlenszerűen választott. Az a tény, hogy a levél i önmagában szűk, ami miatt ez könnyen kezelhető és állítsa be a kívánt szélességet. Másodszor terek önmagukban állnak nemcsak a szóköz, hanem azért is, mert szó-távolság. azaz Plusz, az érték egy helyet, ami összesen számunkra a kívánt szélességet. Ja, és persze, ne feledje, hogy egy csomó „tér + word-távolság” csak akkor működik, amikor a végén egy másik karakter eltérő szóközöket. Mivel a rések hajlamosak „összeomlás” a levél i. után jön szó-távolság nem teszi lehetővé számukra, hogy erre.
Tehát valójában elválaszthatatlanok vagyunk psevdobloki, formájában „betű + padding-left” pszeudo-első, majd egy csomó „tér + szó-térköz + levél”, és így tovább, amíg a sor végére. Nos, a következő sor ismétlődik újra, csak az első psevdoblok most áll egy levelet. De ez a sor nem érdekel, mi csak azokban a „extra egységek”, amelyek kiegészítik az utolsó sor a szokásos blokk a rács.
By the way, a betűket kell lennie ahhoz, hogy töltse ki az utolsó sort garantáltan vége a legrosszabb esetben. Ie ezek száma megegyezik a maximális számát blokk egy sorban.
Igen, és, természetesen, a text-align: indokolják ez a módszer működik ugyanúgy.
A harmadik. hogy ez a módszer a munka IE6-7, le kell cserélnünk a pszeudo-blokk további asszisztens lesz beszúrva, a végén a listán. Plusz, ez lesz kihasználni eszközök, mint a szöveges indokolják. text-align utolsó előtti (a viselkedését írtam le ebben a cikkben), a tulajdon visszaszolgáltatása a kezdeti zoom állapotban a kiegészítő egység és más „örömök”, aminek köszönhetően, ezekben a böngészők mi is működni fog ugyanúgy. Végén ezt a cikket adok különböző lehetőségek ezt a feladatot úgy, hogy lehet választani.
Ebben a cikkben, azt mutatja, hogy a blokk rács nem annyira nincs alávetve. Mint kiderült, ez elég vezérelhető design. Nem csak egy szép összehangolása a blokkok a rács lehet elérni egészen hétköznapi, és nem a nehezebb utat, és az eredmény lehetővé teszi számunkra, hogy könnyen kezelhető a gyümölcs olyan projektek. Mit tegyek, ha a lehetőséget mutatja magát.
Ja, és persze, szeretnék köszönetet mondani Ilya Streltsynu (@ SelenIT2) az ő hihetetlen ötletek és segítség anyagokat. Enélkül, ez a cikk nem lett volna.
Ui Azt is érdekelhetnek:
Köszönöm a módszer működik, több vagy kevesebb, de tökéletesen pontos helymeghatározás változtatható az ablak szélessége nem lehet elérni még a fix szélességű betűtípussal a megadott méret a pszeudo-blokk.
Mégis, ez egy mankó. Próbáltam megoldani ugyanazt a problémát primeneneiem flexbox, de úgy néz ki, hogy használhatatlan itt. Lehet, hogy valaki még mindig van, hogy nem ugyanaz a dolog sokkal modernebb?
Attól tartok, hogy mielőtt a tömeges érkezése Rácsos elrendezés egyszerű megoldások (megbízhatóbb módszer nagyapja egy csomó üres távtartókat, hogy próbálják helyettesíteni egy ál) talál valószínű. De hálózatok feladata lesz elemi. Már csak valami várni, amíg tavasszal!
Kevesebb, mint hat hónappal a legutóbbi változás W3C munkafolyamatban, mint a vezető a konzorcium kapott javaslatot, hogy ezt az új eljárást végül az ügyben. És írd le lényegtelen HTML specifikáció a múzeumban, így nem zavart a fejlesztők, „mintha” kapcsolódnia.
Tovább CSS modul, mely azt mondták csendesen érett állapotát, amellyel a W3C azt tanácsolja, hogy indítsa el a rutinszerű használata az új termékek. tartalmazzák a tulajdonság lehetővé teszi, hogy korlátozzuk a változás a fa rajz, újrarajzoláskor CSS-dobozokat, és változtatni a méretét az elemen belül. Ezért olyan fontos, ...
TÖBB
Paris (a képen), amely a közelmúltban elfogadott CSS munkacsoport ülésén, megérkezett szórakoztató hírek: Properties grid-row-rés és rács-oszlop-szakadék, valamint a csökkentés rácsos rés ...