. Është e ngjashme me tullat kur ndërtohet një ndërtesë. Ndërsa përbën bazën dhe dizajnin e sitit, megjithatë nuk është i vetmi. Si dyert, dritaret, ventilimi, ballkonet dhe të ngjashme, elementë të tjerë HTML përdoren për paraqitje. Këto janë lidhje, formularë, fotografi, lista dhe tabela.
na lejoi ta bëjmë kodin më kompakt dhe më të qartë. Kalimi në paraqitjen e bllokut bëri të mundur heqjen e HTML-së nga gjërat e panevojshme, përkatësisht stilet. Bën të mundur heqjen e plotë të paraqitjes së tabelës së mbingarkuar dhe të vështirë për t'u lundruar.
Përdor në mënyrë aktive paraqitjen e bllokut CSS. Duke përdorur mjetet e disponueshme, mund të krijoni çdo plan urbanistik me saktësi pixel. Ky plan urbanistik quhet pixel perfekt. Ai nënkupton një përputhje të përsosur midis faqes dhe paraqitjes. Fotografia e mësipërme tregon se jo gjithçka është aq e thjeshtë me paraqitjen e bllokut. Në fillim ishte thjesht e pamundur të bëhej pa tavolina. Këto u përdorën për të krijuar paraqitjen kryesore të faqeve dhe blloqet u përdorën për elementë individualë. Kështu ndodhi derisa ata mësuan se si të vendosnin lartësinë e blloqeve.
Përparësitë
Paraqitja e faqes së internetit të bllokimit ka përparësitë e mëposhtme:
Zhvillimi i mëtejshëm
Aktualisht, paraqitja e bllokut të div është e vjetëruar dhe ka përdorim vetëm të kufizuar, vetëm si një rast i veçantë për situata të caktuara. Ai u zëvendësua nga pozicionimi dhe rrjedhja në paraqitje. Kishin shumë mangësi, por në tërësi lejonin më shumë se paraqitjen e bllokut.
Më pas erdhi ndërtimi duke përdorur elementë të blloqeve inline. Kjo lehtësoi shumë punën e programuesve. Kjo metodë përfiton nga të dy llojet e blloqeve dhe ju lejon të krijoni një dizajn më të përgjegjshëm dhe përshtatës. Vlen të përmendet se të gjitha këto metoda në një mënyrë ose në një tjetër përbëheshin nga një element div, i cili i dha emrin "planifikim i mrekullueshëm".
Aktualisht, Flex-box dhe bootstrap përdoren për të ndërtuar faqen. Ata reduktojnë ndjeshëm kodin dhe e bëjnë më të shpejtë dhe më të lehtë krijimin e dizajnit të përgjegjshëm me cilësi të lartë. Ato ju lejojnë të lëvizni blloqe pa thyer të gjithë faqen.
Në ballë të progresit është një teknologji e re - Grids. Kjo ju lejon të krijoni një dizajn të çdo kompleksiteti shumë shpejt dhe me lehtësi. Dhe blloqet, rrjedha, pozicionimi, siç ndodhi me tabelat në një kohë, përdoren vetëm për qëllimin e tyre të synuar.
Paraqitja e div është një model aktual për krijimin e faqes në internet.
Faqet e reja shfaqen vazhdimisht në internet - portalet e lajmeve, bloget dhe faqet personale. Pothuajse secili prej tyre është krijuar në bazë të një modeli blloku, baza e të cilit janë blloqet DIV. Sot do ta kuptojmë këtë teknologji, do të shqyrtojmë nuancat kryesore të paraqitjes së div.
Rrjedha e dokumentit HTML
Nëse kujtojmë se gjuha HTML ju lejon të strukturoni informacionin e hipertekstit, bëhet e qartë se çdo faqe, në thelbin e saj, është një grup blloqesh: fotografi, tekst, lidhje, etj. Ne nuk po flasim konkretisht për DIV-të tani, por ato janë tema të lidhura ngushtë.
Pra, ne kemi një rrjedhë të caktuar të të dhënave nga e cila është mbledhur faqja HTML. Për momentin, ekzistojnë dy lloje të elementeve strukturorë: bllok dhe inline. Blloqet e bllokut, në një rrjedhë normale HTML, janë të vendosura njëri pas tjetrit në një renditje vertikale. Në të njëjtën kohë, si parazgjedhje, gjerësia e bllokut zë të gjithë hapësirën e disponueshme në lidhje me faqen ose elementin prind. Nga ana tjetër, elementët e linjës janë rregulluar njëri pas tjetrit në një renditje horizontale.
Përfaqësuesit kryesorë të këtyre dy kategorive janë etiketat div dhe span.
Prandaj, nëse po flasim për një rrjedhë normale HTML, të gjitha blloqet div do të vendosen nën njëri-tjetrin, dhe hapësira do të jetë në një vijë.
Siç e kuptoni, nuk do të jeni në gjendje të krijoni shënime normale për një faqe interneti duke përdorur elementë inline. Prandaj, disa vite më parë, për të zëvendësuar paraqitjen e tabelës, ata vendosën të përdorin një paraqitje të bazuar në blloqe DIV.
Paraqitja e faqes së internetit DIV
Pra, blloqet DIV filluan të përdoren për të shënuar sitin. Duke përdorur ato, ishte e mundur të vizatohej faqosja kryesore dhe të krijoheshin blloqe shtesë për të gjitha llojet e nevojshme të përmbajtjes.
Le ta shohim këtë proces duke përdorur shembullin e një faqeje standarde, e cila përfshin një kokë, një bllok përmbajtjeje, një shirit anësor dhe një fund.
Ky është një opsion klasik. Logoja ndodhet më shpesh në kokën e faqes, dhe lidhjet e navigimit në bllokun anësor. Blloku kryesor përdoret për të shfaqur informacione - artikuj, përshkrime të kompanive, arkiva fotografish, etj. Në bllokun e poshtëm mund të futni një adresë, kontakte dhe informacione të tjera shërbimi.
Siç mund ta shihni në foto, ne përdorim blloqet kryesore të mëposhtme për të vendosur paraqitjen:
- kokë
- përmbajtjen
- fundi i faqes
Blloku kryesor përdoret si një kontejner për të gjithë përmbajtjen. Header - titulli i faqes. Nav - bllok navigimi. Përmbajtja - informacioni dhe përmbajtja bazë. Footer - fundi i faqes.
Secili prej këtyre blloqeve është një kontejner DIV. Por bazuar në teori, blloqet duhet të ndjekin njëri-tjetrin. Ne duhet të marrim paraqitjen e diskutuar më lart në mënyrë që blloqet të kenë strukturën e mëposhtme:
- KRYESORE
- kokë
- përmbajtjen
- fundi i faqes
Dhe plus, ato do të vendosen në faqe në të njëjtën mënyrë siç shohim në shabllon. Si mund ta arrijmë këtë? Për këtë qëllim, ne do të përdorim vetitë për blloqet DIV, të cilat do të na lejojnë t'i pozicionojmë ato në mënyrën e dëshiruar, në lidhje me njëri-tjetrin dhe faqen në tërësi.
Por së pari, le të krijojmë bazën HTML të paraqitjes sonë dhe të japim emrat e blloqeve në mënyrë që të mund të punojmë me fletë stilesh.
Korniza HTML
Nëse i kapërcejmë të gjitha etiketat e shërbimit, atëherë skeleti i faqes sonë do të duket kështu.
Për çdo bllok kemi caktuar një klasë. Me ndihmën e tij, ne do të vendosim stile për bllokun - kjo do të na ndihmojë të arrijmë vendndodhjen e dëshiruar në faqe.
Është koha për t'u njohur me stilet dhe vetitë që përdoren për paraqitjen e div të faqes.
Stilet CSS
Nëse dikush nuk e di tashmë, fletët e stilit CSS janë përdorur në zhvillimin e faqeve të internetit për një kohë të gjatë. Me ndihmën e tyre, ju mund të ndryshoni çdo element në faqe. Kjo vlen si për dizajnin vizual të bllokut ashtu edhe për vendndodhjen dhe shkallën e tij.
noton
Së pari, le t'i hedhim një vështrim pronës që ju lejon të poziciononi një DIV djathtas ose majtas të faqes ose në lidhje me kontejnerin e tij prind.
Një tërheqje e vogël. Sa herë që i caktojmë një stil një blloku, ai do të ndryshojë vetitë e tij (madhësia, vendndodhja) në lidhje me kontejnerin prind.
Vetia float ka katër vlera: asnjë, djathtas, majtas, trashëgim.
Na intereson kuptimi i "majtas" dhe "djathtas".
Vlera float tregon se në cilën anë do të shfaqet blloku ynë. Të gjitha blloqet e tjera do të rrjedhin rreth tij nga ana e kundërt.
Në rastin tonë, për bllokun e lundrimit duhet të specifikojmë vlerën majtas, dhe për përmbajtjen kryesore vlerën djathtas. Kështu do të duket në skedarin e stilit:
Nav ( float:majtas; ) .përmbajtje ( float:djathtas; )
Nga rruga, ju mund të vendosni pronën vetëm për bllokun e lundrimit. Blloku i përmbajtjes do të vendoset automatikisht në të djathtë të navigimit. Kjo do të arrihet falë float-it që përftohet duke vendosur vetinë float.
Margjinat në CSS: diferenca dhe mbushja
Tani le të kuptojmë dy veti të rëndësishme të përdorura në paraqitjen e bazuar në div. Ata janë përgjegjës për dhëmbëzimin. Mënyra më e lehtë për të kuptuar thelbin e punës së tyre është me një shembull.
Le të imagjinojmë se çfarë duhet të bëjmë në mënyrë që blloku ynë kryesor MAIN të ketë një dhëmbëzim të lehtë nga kreu i faqes. Kjo mund të arrihet duke caktuar një veçori marzh në div me klasën kryesore. Ai është përgjegjës për mbushjen e jashtme të bllokut.
Vetia marzh ka këto vlera: [vlera | interesi | auto] (1,4) | trashëgojnë.
Kështu, ju mund të specifikoni kompensimin në piksele, në përqindje, për secilën anë me radhë.
Është e mundur të vendosni vetëm një indent të caktuar, për shembull në anën e sipërme. Ky është pikërisht rasti ynë. Ja se si do të zbatohet:
Kryesor (margin-lart:10px;)
Tani blloku ynë kryesor do të ketë një mbushje të sipërme prej 10 pikselësh.
Tani le të hartojmë një bllok me navigacion dhe përmbajtje. Imagjinoni që ne tashmë kemi një faqe interneti të gatshme. Të gjitha lidhjet në navigacion janë të vendosura afër skajit të majtë të faqes. Dhe teksti në bllokun e përmbajtjes, përkundrazi, është afër në anën e djathtë. Një dizajn mjaft i pakëndshëm. Duhet të bëjmë mbushje të brendshme.
Vetia e mbushjes është përgjegjëse për këtë, duke pasur këto vlera: [vlera | përqind] (1, 4) | trashëgojnë
Parimi këtu është i njëjtë si me vetinë e marzhit - mund të vendosni dhëmbëzimin për secilën anë veç e veç.
Nav ( float:majtas; mbushje-majtas: 15px; ) .content (float:djathtas; mbushje-djathtas: 20px; )
Duke përdorur këto veti themelore, mund të arrini paraqitjen e dëshiruar të blloqeve DIV. Si rezultat, ju do të merrni një plan urbanistik të gatshëm dhe gjithçka që mbetet është ta plotësoni atë me informacionin e nevojshëm.
Video për artikullin:
konkluzioni
Ne kemi marrë parasysh vetëm pronat themelore. Në realitet ka shumë më tepër prej tyre. Por në çdo rast, informacioni i dhënë do të përdoret gjithmonë në paraqitjen e div.
Pse të kërkoni informacion në sajte të tjera nëse gjithçka është mbledhur këtu?
Seria e artikujve të autorit kushtuar bazat e paraqitjes së faqes së internetit të bllokut. Ky është vendi i parë për të filluar studimin e temës. krijimin e faqes në internet. Mësimet do të jenë të dobishme për ata që duan të mësojnë bazat HTML dhe CSS jo vetëm në teori, por edhe në praktikë.
Ndërsa studiojmë temën, do të krijojmë një faqe interneti, një faqe interneti të rregullt, pa ndonjë zile dhe bilbil të veçantë, por mjaft e bukur.
Në mësime, unë thjesht dhe qartë flas për paraqitjen e faqes në internet të bazuar në bllok dhe më shumë. Nëse doni të kuptoni shpejt bazat paraqitjet e faqeve të internetit, atëherë kjo seri artikujsh do të jetë pikërisht ajo që ju nevojitet.
Çfarë është faqosja e bllokut?
Cfare ndodhi bllokoni paraqitjen e faqes në internet dhe me cfare e hani?
Më parë, faqet e internetit ishin krijuar duke përdorur tabela. Çdo element i faqes, qoftë titull, tekst apo imazh, ndodhej në qelizën e vet. Këto qeliza u grumbulluan në qeliza të tjera, më të mëdha, dhe ato, nga ana tjetër, shtriheshin në qelizën kryesore, domethënë në vetë faqen e faqes.
Paraqitja tabelare tani është e vjetëruar, megjithëse shumë webmaster vazhdojnë ta përdorin atë. Disavantazhi i tij i madh është kodi i tij i rëndë. Në fund të fundit, çdo qelizë e vogël duhet të caktohet me etiketa të caktuara.
Paraqitja e bllokut- një këngë krejtësisht tjetër. Këtu, të gjithë elementët e faqes janë të vendosur në blloqe speciale të quajtura divs. Në thelbin e tyre, ato janë disi të ngjashme me të njëjtat tabela. Një kuti është një kuti edhe në Afrikë. Por blloqet janë shumë më të përshtatshme, më të thjeshta dhe më funksionale.
Blloko në paraqitjen e faqes në internet, kjo është një zonë e rregullt drejtkëndore që ka një sërë veçorish, si: kornizë, margjina dhe dhëmbëzime. Përmbajtja e bllokut mund të jetë çdo gjë - një pjesë teksti, një foto, një listë, një formular për të plotësuar, një menu navigimi, etj.
Kornizë- kjo është skica e një blloku për të cilin mund të vendosni karakteristika të tilla si trashësia, ngjyra dhe lloji (me pika, të ngurta, me pika).
Fushat (mbushje)- ndani përmbajtjen e bllokut nga korniza e tij në mënyrë që teksti, për shembull, të mos jetë "mbrapa" deri në muret e bllokut.
Margjinat- kjo është hapësira boshe midis blloqeve të ndryshme, duke lejuar që dy blloqe të pozicionohen në lidhje me njëri-tjetrin në një distancë të caktuar.
Blloqet, si tabelat, janë rregulluar gjithmonë vertikalisht në faqe. Kjo do të thotë, nëse dy blloqe shkruhen në një rresht në kodin e faqes, ato do të shfaqen në shfletues njëra poshtë tjetrës. Nëse duhet të rregullojmë disa blloqe horizontalisht në një rresht, atëherë në vetitë e tyre vendosim një parametër të tillë si " rrjedhin përreth"(noton). Por më shumë për këtë më vonë.
Bllokimi i paraqitjes së faqes. Etiketat
Etiketëështë një ndërtim i veçantë i gjuhës HTML. Të dallojë hapje Dhe mbyllja etiketa. Mos i ngatërroni me hashtags nga rrjetet sociale, apo etiketa në faqet e internetit, këto janë gjëra të ndryshme!
Në rastin më të thjeshtë, një etiketë është si një pjesë e një grupi ndërtimi për fëmijë, i cili ka qëllimin e tij të rreptë: një shirit do të thotë një shirit, një rrotë do të thotë një rrotë dhe asgjë tjetër. Për shembull, një etiketë paragrafi:
Teksti i paragrafit.
shënohet gjithmonë me shkronjën p dhe asgjë tjetër. Ky është emri i tij.
Etiketat janë gjithmonë të mbyllura në kllapa këndore. Siç mund ta shihni nga shembulli, ekziston një etiketë hapëse dhe mbyllëse. Etiketa mbyllëse ka një të pjerrët të shtuar përpara emrit - një prerje përpara / .
Jo të gjitha etiketat kanë një çift mbyllës. Për shembull, etiketa e imazhit img nuk e ka fare atë. Por në mënyrë që të përputhen me standardet moderne dhe kërkesat e specifikimit XHTML, ata ende shtojnë një hapësirë me një të pjerrët përpara kllapës së këndit të mbylljes. Duket diçka si kjo:
etiketa div
Etiketa div është baza e paraqitjes së bllokut. Këto janë vetë kubet nga të cilat është ndërtuar i gjithë siti. Ky etiketë është neutral. Ndryshe nga etiketat standarde HTML, të cilat janë të lidhura rreptësisht me përmbajtjen e tyre (p - me paragrafët, a - me lidhjet, img - me imazhet), etiketa div mund të përmbajë gjithçka dhe aq sa dëshironi nga këto gjëra. Konsideroni atë si një kuti të madhe ku të gjitha lodrat janë hedhur.
Etiketa div përdoret për të përcaktuar zonat funksionale në faqe. Për shembull, të tilla si: "header", bllok navigimi, blloku i përmbajtjes kryesore, "footer" ose footer sipas mendimit tonë.
Etiketa div, si çdo etiketë tjetër, ka atributet e veta.
atribut- karakteristikat përshkruese të etiketës. Kjo është, çfarë mund të bëjë dhe si. Për shembull, le të marrim një etiketë imazhi:
Në këtë rast, src, gjerësia, lartësia, alt janë atribute të etiketës. Në thonjëza (dhe kjo është gjithashtu një kërkesë e detyrueshme e standardeve moderne). vlerat atributet.
Nuk është e vështirë të deshifrosh një regjistrim të tillë. Etiketa tregon se në këtë vend të faqes duhet të bashkëngjitni imazhin risunok.jpg nga dosja e imazheve. Gjerësia e imazhit është 200 piksele, lartësia është 50 piksele. Dhe grumbullit i është shtuar tekst alternativ që shpjegon atë që tregohet në foto.
Nga rruga, teksti alternativ nuk është një trill, por edhe një kërkesë e nevojshme. Jo të gjithë përdoruesit e internetit kanë shikim të mirë. Dikush përdor një program për njohjen dhe leximin e tekstit. Dhe disa njerëz thjesht fikin shfaqjen e imazheve në shfletues. Kjo është arsyeja pse ka tituj alternativë për vizatimet.
Nëse nuk ka kuptim nënshkrimi i tyre (për shembull, një shënues liste ose një lloj shigjete), atëherë atributi alt lihet me një hapësirë boshe midis thonjëzave.
atributet e etiketës div
Etiketa div ka vetëm dy atribute:
id - një atribut që ju lejon të caktoni unike vlera, pra ajo që përdoret në faqe vetem nje here. Për shembull, kreu ose fundi.
Në këtë mënyrë, ne mund të vendosim më tej disa cilësime në fletën e stilit për etiketën div me atributin id dhe vlerën e kokës, dhe ato krejtësisht të ndryshme për fundin. Dhe shfletuesi e njeh saktë se kjo pjesë e tekstit i përket "titullit" dhe do të shtypet, për shembull, me font të madh dhe të kuq, por ky i përket "futerit" dhe do të shtypet me font të vogël dhe gri. Dhe pa konfuzion!
class është një atribut që ju lejon të caktoni të njëjtën vlerë për disa elementë. Për shembull, shtoni një kornizë me të njëjtën trashësi dhe ngjyrë në të gjitha imazhet në faqe. Meqenëse ka disa imazhe, atributi id nuk mund të përdoret më, kështu që ne përdorim class .
Për herë të parë mendoj se mjafton. Nëse diçka është e paqartë në lidhje me paraqitjen e bllokut të faqeve të internetit, pyesni në komente.
Vazhdon. Qëndroni në kontakt!
Paraqitja me blloqe div është bërë prej kohësh një standard dhe ka një sërë përparësish mbi paraqitjen tabelare. Sidoqoftë, në realitet, zhvilluesit fillestarë janë të hutuar në lidhje me sjelljen e të njëjtave blloqe.
Le të shohim pikat kryesore të paraqitjes së bllokut. Tani nuk do të marrim parasysh standardin html5, por thjesht do të shikojmë bazat e paraqitjes me blloqe div, e cila përdoret gjatë krijimit të një paraqitjeje ose ndonjë komponenti individual të faqes.
Çfarë konsiderohet element blloku?
Zona e një elementi të tillë në faqe përfaqësohet nga një drejtkëndësh; si parazgjedhje, ai zë të gjithë gjerësinë e disponueshme dhe fillon në një linjë të re.
Elementi më i zakonshëm i përdorur në paraqitjen e bllokut është elementi universal
.
Pra, nga e thjeshta në komplekse. Le të shohim se si div-të shfaqen si parazgjedhje pa stilet që ndikojnë në pozicionin e tyre. Për qartësi, ne do t'u shtojmë stile elementeve në linjë, përmes atributit stil.
Blloku 1
Blloku 2
Blloku 3
Le të shtojmë një vlerë të gjerësisë për çdo bllok:
Blloku 1
Blloku 2
Blloku 3
Mund të shihet se çdo bllok, sipas specifikimit, ndodhet në një linjë të re. Kjo është sjellja e tyre normale.
Tani lind pyetja, si të pozicionohet blloqe div në një linjë, njëri pas tjetrit?
Për këtë qëllim, ekziston një veti që përcakton se në cilën anë blloku do të detyrohet të rreshtohet. Në të njëjtën kohë, nga skaji tjetër, ai mund të rrjedhë rreth elementëve të tjerë.
Vetia float ka kuptimet e mëposhtme:
- majtas - blloku është rreshtuar në skajin e majtë, duke rrjedhur në të djathtë
- djathtas - blloku është rreshtuar në skajin e djathtë, duke rrjedhur në të majtë
- asnjë - asnjë mbështjellje nuk është specifikuar, blloku sillet si parazgjedhje, si në shembujt e mëparshëm.
Le të shtojmë float:left në blloqet tona në mënyrë që blloqet të rreshtohen në të majtë:
Blloku 1
Blloku 2
Blloku 3
Si rezultat, blloqet u rreshtuan në një rresht. Në rregull, le të themi se donim të shtonim një div tjetër në fund, dhe do ta bëjmë pa specifikuar vetinë float:
Blloku 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Njësia 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Blloku 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Njësia 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pse ndodhi kjo? Me pak fjalë, kjo ndodh sepse elementët e lundruar bien jashtë rrjedhës së dokumentit. Sidoqoftë, kjo është një temë për një artikull të veçantë. Këtu do të njihemi me pronën e re, e cila kontrollon sjelljen e elementëve lundrues:
- majtas - çaktivizon mbështjelljen në anën e majtë, të gjithë elementët do të shfaqen në një rresht të ri (nën elementin)
- rigth - parandalon mbështjelljen e elementit në anën e djathtë
- të dyja - ndalon mbështjelljen e një elementi në të dy anët; rekomandohet ta përdorni kur duhet të tregoni qartë elementin në një vijë të re ose nuk dihet se në cilën anë mund të mbështilleni rreth elementëve të tjerë
Le të shtojmë pronën clear:left në Bllokun 4, i cili do të parandalojë që ky element të rrjedhë rreth elementëve të tjerë lundrues në anën e majtë.
Blloku 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Njësia 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Blloku 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Njësia 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Blloku 4 vendoset në një linjë të re, siç na nevojitet.
Në këtë rast, ne e dimë se si ndodhen blloqet e tjera, kështu që në shembull kemi treguar menjëherë qartë: majtas. Ka situata kur nuk e dimë saktësisht se cilën anë do të takohet blloku lundrues, kështu që në raste të tilla ia vlen të specifikoni qartë: të dyja, gjë që anulon rrjedhën nga të dyja anët. Tani kemi kuptuar se si t'i pozicionojmë blloqet div horizontalisht në një rresht.
Mbani në mend se blloqet float vendosen në të njëjtën linjë nëse lejon gjerësia e elementit prind. Nëse elementët e bllokut nuk përshtaten në një rresht, ata do të mbyllen në një linjë të re. Nëse kjo është kritike, për shembull, kur vendosni paraqitjet, duhet ta merrni parasysh këtë dhe për blloqet me notim, sigurohuni që të vendosni gjerësinë - fikse (px) ose gome (%, rem, etj.). Le të shohim situata të tilla në vijim.
Si të ndikojmë në blloqe nëse duam t'i vendosim këto blloqe në qendër?
Zgjidhja klasike do të ishte shtimi i një prindi në blloqe dhe përdorimi i marzhit: 0 auto; pronë.
Pse i dhamë prindit klasën.mbështjellës? "mbështjellës" do të thotë "mbështjellës". Është një lloj praktike e pranuar përgjithësisht, që përcakton emrin e klasës, që një element të mbështjell blloqe të tjera dhe në këtë mënyrë t'i lejojë ato të kontrollohen/ndikohen duke ndryshuar vetë prindin.
Le të marrim shënimin nga shembujt e mëparshëm dhe ta përmirësojmë atë.
Blloku 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Njësia 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Blloku 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blloku 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Njësia 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Gjithçka duket e thjeshtë këtu.
Dhe nëse nuk na pëlqen që teksti ngjitet afër skajit të bllokut prind dhe duam të shtojmë fusha pa bërë ndryshime në shënim, vetëm duke përdorur css. Le të shtojmë vetinë e mbushjes tek elementët:
Blloku 1. Lorem
Blloku 2. Lorem ipsum
Blloku 3. Lorem ipsum
Blloku 4. Lorem
Dhe ne shohim që paraqitja jonë është shkatërruar! Blloku 3 ka shkuar diku. Pse ndodhi kjo? Përgjigja është e thjeshtë. Duke shtuar fusha në elementë, ne rritëm gjerësinë e tyre. Tani vlerat janë:
Blloku 1: 10 + 200 + 10 = 220 px
Blloku 2: 10 + 150 + 10 = 170 px
Blloku 3: 10 + 100 + 10 = 120 px
Blloku 4: 10 + 450 + 10 = 470 px
220 + 170 + 120 = 510 px
Gjerësia totale e tre blloqeve është 510, ato nuk përshtaten në gjerësinë e prindërve (450) dhe për këtë arsye transferohen në një linjë të re.
Si ta rregulloni atë? Ju mund të bëni sa më poshtë:
- Rivendosni vlerat e gjerësisë për çdo bllok, duke marrë parasysh kufijtë. Duke zvogëluar përmasat e bllokut. Gjithçka do të përshtatet mjeshtërisht në një linjë përsëri. A jeni dakord që kjo është e papërshtatshme? Sa herë që futem në paraqitjen dhe modifikoj diçka.
- Përdorni vetinë e madhësisë së kutisë: border-box. Kështu që llogaritja merret nga gjerësia totale e bllokut. Unë ju këshilloj të zbuloni se cili është modeli i bllokut css.
Duke përdorur opsionin e dytë, rezulton kështu:
Blloku 1. Lorem
Blloku 2. Lorem ipsum
Blloku 3. Lorem ipsum
Blloku 4. Lorem
Blloku 1. Lorem
Blloku 2. Lorem ipsum
Blloku 3. Lorem ipsum
Blloku 4. Lorem
Tani le t'i bashkojmë të gjitha informacionet që kemi marrë dhe të përpiqemi të krijojmë një plan urbanistik të thjeshtë standard me tre kolona me një plan urbanistik fleksibël, i cili do të shtrihet në një maksimum prej 900 px, pas së cilës i gjithë paraqitja do të pozicionohet në qendër.
Krijoni shenjën e paraqitjes:
Dokumenti
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro ex expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci assumenda earum!
Ne shkruajmë stile:
Trupi ( gjerësia maksimale: 900 px; /* kufizoni gjerësinë maksimale */ margjina: 0 automatik; ) /* për të gjitha blloqet brenda trupit, ndryshoni algoritmin e llogaritjes së gjerësisë së bllokut dhe shtoni 10 px margjina në të gjitha blloqet */ body div ( - webkit-box-sizing : border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; ) .header ( sfond: #CCA69E; mbushje: 10px; ) .left- shiriti anësor ( gjerësia: 20 %; sfondi: #8ED9B6; notimi: majtas; ) .përmbajtja ( lundrues: majtas; gjerësia: 60%; ) .shiriti anësor i djathtë ( gjerësia: 20%; sfondi: #FF9282; notimi: majtas; ) .footer ( sfondi: #000; i qartë: të dyja; /* çaktivizoni mbështjelljen në të dyja anët, blloku shfaqet në një rresht të ri */ ngjyra: #ccc; )
Nëse diçka është e paqartë, pyesni në komente.
Mund të jetë e dobishme të lexoni: