Gjithçka në lidhje me pronën lundruese. Çfarë është vlera float në CS: GO? Çfarë është float në css

Float është një veti CSS për pozicionimin e elementeve. Për të kuptuar qëllimin dhe origjinën e tij, mund t'i drejtoheni dizajnit të printimit. Në një paraqitje printimi, imazhet mund të pozicionohen në faqe në mënyrë që teksti të "mbështillet" rreth tyre. Kjo zakonisht quhet "mbështjellje teksti".

Në programet e paraqitjes së faqeve, elementët me tekst mund të marrin parasysh imazhet, si dhe t'i injorojnë ato. Nëse ato shpërfillen, teksti do të shfaqet sipër fotove, sikur të mos ishin aty. Ky është ndryshimi kryesor nëse imazhet janë pjesë e rrjedhës kryesore të faqes apo jo. Dizajni i uebit është shumë i ngjashëm.

Në dizajnin e uebit, elementët e faqeve të lundruara sillen njësoj si imazhet në artet grafike kur teksti rrjedh rreth tyre. Elementë të tillë janë pjesë e rrjedhës kryesore të faqes së internetit. Megjithatë, ky nuk është rasti nëse elementët përdorin pozicionim absolut. Elementët e pozicionuar absolutisht hiqen nga rrjedha kryesore e faqes, ngjashëm me shembullin e mësipërm, kur teksti injoron imazhet në printim. Elementë të tillë nuk ndikojnë në pozicionin e elementeve të tjerë, qofshin ato prekje apo jo.

Vetia float është vendosur si kjo:

#shirit anësor (lundrues: djathtas;)

Janë 4 vlera në total për pronën float. Majtas dhe djathtas përdoren për drejtimet përkatëse. Asnjë (e parazgjedhur) - Siguron që elementi të mos notojë. Dhe trashëgim, që thotë se sjellja duhet të jetë e njëjtë me elementin prind.

Për çfarë mund të përdoret float?

Përveç mbështjelljes së tekstit rreth imazheve, float mund të përdoret për të krijuar një plan urbanistik për një faqe të tërë.

Vetia float është gjithashtu e dobishme në shkallë më të vogla. Për shembull, merrni parasysh një zonë të vogël në një faqe siti. Le të themi se po lëvizni avatarin, kur ndryshoni madhësinë e imazhit, madhësia e tekstit do të ndryshohet për t'iu përshtatur imazhit.

I njëjti rregullim i objekteve mund të arrihet duke përdorur pozicionimin. Objektit të kontejnerit i caktohet pozicionimi relativ dhe objektit të imazhit i caktohet pozicionimi absolut. Në këtë rast, avatari nuk do të ndikojë në pozicionin e tekstit.

Mbështetja e pronës float

Për notat, prona e lidhur është e qartë. Çdo element që ka grupin e qartë të vetive nuk do të ngrihet lart siç pritej, por do të shfaqet më poshtë, pas notave. Ndoshta shembulli në foto do ta shpjegojë atë më mirë se fjalët.

Në shembull, shiriti anësor është i rreshtuar djathtas (float: djathtas;), dhe lartësia e tij është më e vogël se zona kryesore e përmbajtjes. Prandaj, fundi do të ngrihet më lart, pasi ka lartësi të mjaftueshme për të dhe kjo kërkohet nga sjellja e notimit. Për të korrigjuar situatën, ai duhet të vendosë veçorinë e qartë, e cila siguron që elementi të shfaqet poshtë elementëve float.

#footer (e qartë: të dyja;)

Vetia e qartë mund të marrë katër vlera. Të dyja, ato më të përdorurat, përdoren për të kthyer notimin e çdo drejtimi. Majtas dhe djathtas përdoren për të anuluar notimin e njërit prej drejtimeve. Asnjë nuk është i paracaktuar, zakonisht nuk përdoret nëse nuk dëshironi ta pastroni. Vlera e trashëguar do të ishte vlera e pestë, por çuditërisht nuk mbështetet në Internet Explorer. Anulimi vetëm i notave majtas ose djathtas është shumë më pak i zakonshëm, por sigurisht ka qëllimet e veta.

Shembje e madhe

Një tjetër gjë e mahnitshme në lidhje me vetinë float është se përdorimi i saj mund të ndikojë në elementin prind. Nëse një element i tillë përmban vetëm elementë notues, atëherë ai fjalë për fjalë shembet, domethënë lartësia e tij është zero. Kjo nuk është gjithmonë e dukshme nëse elementi prind nuk ka ndonjë grup të dukshëm të sfondit.

Një kolaps i tillë duket i palogjikshëm, por alternativa është edhe më e keqe. Merrni parasysh këtë shembull:

Nëse një element i nivelit të bllokut në krye zmadhohet automatikisht për të akomoduar të gjitha lundrimet, atëherë do të kemi një ndërprerje të panatyrshme në tekst midis paragrafëve, pa asnjë mënyrë për ta rregulluar atë. Nëse do të ishte kështu, dizajnerët tanë do të ankoheshin shumë më tepër për këtë sjellje sesa për kolaps.

Kështu, kolapsi është pothuajse gjithmonë i nevojshëm për të parandaluar vështirësitë e paraqitjes. Për të ndryshuar këtë sjellje, duhet të shtoni një element jo-float pas elementeve float, por përpara se elementi prind të mbyllet.

Metodat e anulimit të lundrimit

Nëse e dini se pas elementeve float, do të shfaqet gjithmonë ndonjë element tjetër (për shembull, një footer), atëherë ju vetëm duhet të vendosni veçorinë e qartë për të: të dyja; , si në shembullin e mësipërm, dhe shkoni për biznesin tuaj më tej. Kjo është ideale pasi nuk kërkon ndonjë hakim ose elementë shtesë. Sigurisht, jo gjithçka në jetën tonë është kaq e qetë dhe ka raste kur kjo metodë nuk është e mjaftueshme. Prandaj, duhet të keni disa metoda shtesë në arsenalin tuaj.

• Metoda e ndarjes së zbrazët. Përdoret, fjalë për fjalë, një div bosh.
  ... Ndonjëherë një element mund të përdoret në vend të tij
  ose ndonjë tjetër, por div përdoret më shpesh sepse si parazgjedhje nuk ka stil, nuk ka qëllim të veçantë dhe nuk ka gjasa të stilohet në mënyrë të përgjithshme përmes CSS. Adhuruesit e shënimit të pastër semantikisht mund të mos e pëlqejnë këtë teknikë, pasi prania e një div boshe nuk ka kuptim kontekstual dhe vendoset në faqe vetëm për arsye dizajni. Sigurisht, në mënyrë rigoroze, kanë të drejtë, por ai bën punën e tij dhe nuk i bën keq askujt.
• Metoda e tejmbushjes. Bazuar në faktin se elementi mëmë duhet të ketë të vendosur veçoritë e tejmbushjes. Nëse vlera e kësaj vetie është vendosur në automatik ose e fshehur, atëherë elementi prind do të rritet për të përmbajtur të gjitha notat. Kjo metodë duket më e saktë semantikisht pasi nuk kërkon elemente shtesë. Megjithatë, nëse do të përdorni një div tjetër vetëm për të përdorur këtë qasje (që do të thotë div mëmë), atëherë do të jetë njësoj si shembulli i mëparshëm me një div bosh të shtuar. Gjithashtu, mbani mend se prona e tejmbushjes është për qëllime të tjera. Kini kujdes që të mos lejoni që disa nga përmbajtjet tuaja të zhduken ose të shfaqen shirita të panevojshëm lëvizjeje.
• Metoda e thjeshtë e pastrimit. Kjo metodë përdor pseudo përzgjedhësin e mrekullueshëm CSS -: after. Shumë më mirë sesa përdorimi i tejmbushjes në elementin prind. Thjesht vendosni një klasë shtesë për të, si kjo: .clearfix: after (përmbajtja: "."; Dukshmëria: e fshehur; shfaqja: bllok; lartësia: 0; qartë: të dyja;) float. Dhe nga rruga, kjo nuk është e gjithë historia se si duhet të përdoret kodi shtesë në shfletuesit e vjetër.

Dhe, siç mund ta imagjinoni, secila prej metodave përdoret në situata të ndryshme. Merrni, për shembull, një rrjet elementësh blloku të llojeve të ndryshme.

Për një paraqitje më të mirë vizuale, do të ishte mirë të kombinoheshin blloqe të tilla. Për shembull, ne duam që çdo lloj të fillojë në një linjë të re, në rastin tonë lloji i elementit përcaktohet nga ngjyra. Ne mund të përdorim metodën e tejmbushjes ose "metodën e thjeshtë të pastrimit" nëse secili grup ka elementin e tij të kontejnerit. Ose mund të përdorim një metodë div boshe midis secilit prej grupeve. Tre elementë kontejnerë, ose tre div boshe, që është më e mira për detyrën tuaj - varet nga ju.

Çështjet e lundrimit

Float shpesh anashkalohen sepse ato duhet të trajtohen me shumë kujdes. Shumica e gabimeve erdhën me IE6. Ndërsa gjithnjë e më shumë dizajnerë të uebit po heqin mbështetjen për IE6, ju nuk mund të shqetësoheni për këto çështje. Por për ata që kujdesen, këtu është një listë e shkurtër.

Alternativat e notimit

Nëse keni nevojë të mbështillni tekstin rreth figurës, atëherë nuk ka alternativa. Por për paraqitjen e faqes, ka patjetër një zgjedhje. Ka disa qasje shumë interesante që kombinojnë fleksibilitetin e notimit me fuqinë e pozicionimit absolut. Në CSS3 ekziston një i ashtuquajtur Moduli i paraqitjes së shabllonit e cila do të ofrojë një alternativë të mirë notimi në të ardhmen.

Përcakton se në cilën anë do të përafrohet elementi, me elementë të tjerë që rrjedhin rreth tij nga anët e tjera. Kur vetia float nuk është asnjë, elementi paraqitet në faqe si zakonisht, duke lejuar që një rresht i tekstit të rrjedhshëm të jetë në të njëjtën linjë me vetë elementin.

informacion të shkurtër

Sintaksë

noton: majtas | drejtë | asnje

Emërtimet

	Përshkrim	Shembull
<тип>	Tregon llojin e vlerës.	<размер>
A & & B	Vlerat duhet të shfaqen në rendin e treguar.	<размер> && <цвет>
A | B	Tregon që vetëm një nga vlerat e sugjeruara duhet të zgjidhet (A ose B).	normale | kapele të vogla
A || B	Çdo vlerë mund të përdoret vetëm ose së bashku me të tjerat në çdo mënyrë.	gjerësia || numëroj
	Vlerat e grupeve.	[kulture || kryq]
*	Përsëriteni zero ose më shumë herë.	[,<время>]*
+	Përsëriteni një ose më shumë herë.	<число>+
?	Lloji, fjala ose grupi i specifikuar është opsional.	futur?
(A, B)	Përsëriteni të paktën A, por jo më shumë se B herë.	<радиус>{1,4}
#	Përsëriteni një ose më shumë herë, të ndara me presje.	<время>#

vlerat

majtas Rreshton një element në të majtë dhe të gjithë elementët e tjerë, si teksti, rrjedhin djathtas. djathtas Rreshton elementin në të djathtë, dhe të gjithë elementët e tjerë rrjedhin në të majtë. Asnjë Wrap rreth elementit nuk është specifikuar.

Sandbox

Winnie the Pooh nuk ishte gjithmonë kundër një pije freskuese, veçanërisht në orën njëmbëdhjetë të mëngjesit, sepse në atë kohë mëngjesi kishte mbaruar prej kohësh dhe darka as që kishte menduar të fillonte. Dhe, sigurisht, ai ishte jashtëzakonisht i kënaqur kur pa Lepurin duke nxjerrë gota dhe pjata.

img (lundrues: ((Vlera e këndit të lojërave));)

Shembull

Bihejviorizmi, sado paradoksal të duket, ndriçon stimulin e sublimuar, për shembull, Richard Bandler përdori një ndryshim në nënmodalitete për të ndërtuar shtete efektive.

Rezultati i këtij shembulli është paraqitur në Fig. një.

Oriz. 1. Përdorimi i vetive float

Modeli i objektit

Nje objekt.style.cssFloat

shënim

Internet Explorer 6 po sheh një gabim të dyfishtë të mbushjes majtas ose djathtas për elementët lundrues të vendosur brenda elementëve prindër. Mbushja që është ngjitur me anën e prindit dyfishohet. Problemi zakonisht zgjidhet duke shtuar ekran: inline në elementin e lundruar. Ky shfletues shton gjithashtu një mbushje prej 3 pikselësh (i quajtur "bug me tre piksel") në drejtimin e dhënë nga vlera float.

Specifikim

Çdo specifikim kalon nëpër disa faza të miratimit.

• Rekomandim - Ky specifikim është miratuar nga W3C dhe rekomandohet si standard.
• Rekomandimi i Kandidatit ( Rekomandim i mundshëm) - grupi përgjegjës për standardin është i kënaqur që ai është në përputhje me objektivat e tij, por kërkohet ndihma e komunitetit të zhvilluesve për zbatimin e standardit.
• Rekomandimi i propozuar ( Rekomandim i sugjeruar) - Në këtë pikë, dokumenti i dorëzohet Këshillit Këshillimor të W3C për miratim përfundimtar.
• Drafti Punues - Një version më i pjekur i draftit pas diskutimit dhe amendamenteve për shqyrtim nga komuniteti.
• Drafti i redaktorit ( Drafti editorial) - një draft version i standardit pas redaktimit nga redaktorët e projektit.
• draft ( Draft specifikimi) është drafti i parë i standardit.

Shfletuesit

Shfletuesit

Konventat e mëposhtme përdoren në tabelën e shfletuesit.

Përshkruan në detaje veçorinë CSS noton, jepen veçoritë e aplikimit dhe hollësitë e përdorimit, llojet e pozicionimit të elementeve HTML.

Dua të vërej se për fillestarët, sa më sipër mund të duket konfuze dhe e ndërlikuar, por ju siguroj se pa ditur rregullat për paraqitjen e elementeve nga një shfletues, nuk do të bëheni një projektues i mirë i paraqitjes. Prandaj, ju këshilloj të jeni të durueshëm.

Terminologjia

Për të shmangur paqartësitë, le të biem dakord për kushtet.
Noton(element lundrues) - nën noton ose një element lundrues në një artikull nënkupton një element blloku me një cilësi të caktuar CSS noton — drejtë ose majtas.
Boks- Termi boks i referohet një drejtkëndëshi imagjinar që mbyll çdo element HTML. Në përputhje me terminologjinë në gjuhën angleze, ky drejtkëndësh imagjinar do të quhet një kuti.
Nëse nuk është shumë e qartë për boksin, atëherë ju rekomandoj fuqimisht që të njiheni më në detaje me kutitë dhe vetitë e tyre, sepse ky term përdoret shpesh në artikull, dhe më e rëndësishmja, është baza e të gjithë paraqitjes së HTML.
Shënim. Më tej në tekst do të ndodhë fjalët e nënvizuara... Kështu, unë dua t'i kushtoj vëmendje të veçantë një vetie ose cilësie specifike të një elementi.

Llojet e pozicionimit të elementeve HTML

Për një paraqitje të qartë të sa më sipër, duhet të dini edhe parimet bazë të shfaqjes së elementeve në dokumentet HTML.
Sipas w3.org, shënjimi WEB përdor tre paraqitje për elementët në dokumentet e Uebit.
Rrjedhje normale- Në CSS 2.1, rrjedha normale e një dokumenti Web përfshin elementë të përfaqësuar si kuti kuti, elementë të formatuar si kuti inline dhe pozicionimin relativ të kutive dhe kutive inline.
Me fjalë të tjera, rrjedha normale përfshin elemente të rregullta të paraqitjes që nuk kanë grup noton e barabartë me majtas Djathtas, ose pozicion e barabartë me absolute / fikse .
Noton- një element lundrues vendoset fillimisht në përputhje me rregullat e vendosjes në një rrjedhë normale, pastaj hiqet nga ky përrua dhe zhvendoset në vijën e tij majtas ose djathtas, sa më shumë që të jetë e mundur.
Jini të qartë për rregullin e rëndësishëm të mëposhtëm. Meqenëse elementët lundrues rrjedhin nga rrjedha normale e dokumentit, kutitë e bllokut të rrjedhës normale nuk i shohin ato, por kutitë inline të rrjedhës normale i shohin ato dhe rrjedhin përreth në njërën anë; kutitë inline, në veçanti, përfshijnë teksti i zakonshëm i kutive të bllokut. Kjo do të thotë se nëse, në vendosjen e tyre, kutitë e bllokut të rrjedhës normale nuk i kushtojnë vëmendje pranisë së kutive lundruese, atëherë përmbajtja e këtyre kutive (elementeve inline) rrjedh rreth elementëve të tillë.
Pozicionimi absolut- me pozicionim absolut, kutia hiqet plotësisht nga rrjedha normale (nuk ndikon në ato të mëvonshme) dhe vendoset në lidhje me pozicionin e enës së saj, domethënë elementin në të cilin ndodhet.
Mund të lexoni pak më shumë rreth rrjedhave të dokumenteve HTML në artikull

Dallimet midis notave dhe elementëve të pozicionuar

Në fillim, për çdo rast, më lejoni t'ju kujtoj se cili është ndryshimi midis lundrimit ( noton) dhe pozicionuar ( pozicion) elementet. Një element relativisht i pozicionuar me një vlerë pozicioni: i afërm mbetet në rrjedhën normale të dokumentit, por zhvendoset në raport me pozicionin e tij, ndërkohë që elementët e tjerë nuk preken dhe mbeten aty ku kanë qenë. Kjo lejon që elementët e pozicionuar relativ të mbivendosen me elementët përreth në faqe. Nëse sendi ka pozicioni: absolut; ose pozicioni: fiks; pastaj hiqet nga rrjedha normale dhe vendoset sipas rregullave absolute të pozicionimit.
Një element lundrues hiqet gjithmonë nga rrjedha normale e dokumentit dhe ndikon në vendosjen e elementeve përreth.

Tani le të fillojmë.

Çfarë është float?

"Float" është një nga vetitë CSS të një elementi shënjimi në nivel blloku që bën që një element HTML të notojë në pozicionin ekstrem majtas ose djathtas të disponueshëm për vendosje brenda kontejnerit që përmban. Nëse gjerësia e kontejnerit nuk ka hapësirë ​​të mjaftueshme në vijën aktuale për ta përshtatur atë, ajo zhvendoset në rreshtin tjetër derisa të mund të përshtatet. Vini re se gjerësia noton një element përcaktohet nga përmbajtja e tij. Në varësi të vlerës së caktuar noton, elementët e linjës mund të mbështjellin një element të tillë blloku përgjatë njërës prej anëve të tij horizontale.
Pronës noton mund të marrë vlerat e mëposhtme: asnje(e parazgjedhur), majtas, djathtas dhe trashëgojnë.

Rregullat për paraqitjen e elementeve float

Çfarë ndodh kur shfletuesi ndeshet me një element që ka një veti noton i ndryshëm nga asnje?
Fillimisht, një kuti e tillë vendoset si një element i rregullt, më pas hiqet nga rrjedha normale dhe zhvendoset në anën e majtë ose të djathtë derisa të ndeshet me të njëjtën. noton një element ose kufi i kontejnerit të tij mëmë. Nëse nuk ka hapësirë ​​të mjaftueshme horizontale të mbetur për një element, shfletuesi e zhvendos atë në rreshtin tjetër të kontejnerit të tij.
Për aq sa noton artikulli i tërhequr nga rrjedha normale, artikuj bllok normal pa grup të veçorive noton nuk dinë për ekzistencën e tij dhe vendosen në mënyrën e zakonshme, secili në një linjë të re. Elementet e shënimit në linjë "shih" noton kuti dhe rrjedh rreth tij në njërën nga anët në varësi të vlerës - majtas ose drejtë.
Për një demonstrim të qartë të asaj që u tha, do të jap shembullin e mëposhtëm.

Kjo është ajo që shfaq shfletuesi.

Demonstrimi i renderimit të elementeve float

Tani le të kuptojmë se çfarë ndodhi. Shembulli tregon 4 blloqe, kutia 1 dhe kutia 2 janë dhënë nga shfletuesi si parazgjedhje, domethënë në rrjedhën normale, dhe elementët e brendshëm kanë notoj = majtas... Për ta bërë shembullin më të qartë, shtova një ngjyrë sfondi dhe mbushje në blloqe. Pra, në fund, blloqet e paracaktuar (1 dhe 4) u shfaqën, si zakonisht, secili në një rresht të ri dhe zënë të gjithë gjerësinë ( meqenëse shfaqet pamja e ekranit të shënimit, gjerësia e kutive kufizohet nga gjerësia e figurës). Ato lundruese (2 dhe 3) u hoqën nga rrjedha normale (d.m.th., kutitë e 1-rë dhe të 4-të nuk i shohin ato, prandaj "kutia normale2" fillon nën 1 nga fillimi i rreshtit) dhe u zhvendosën në kufirin e majtë të kontejnerit. Dhe megjithëse kutitë normale të bllokut nuk shohin kuti lundruese, kutia e linjës e kutisë së fundit (dhe ky është teksti i saj) sheh kuti lundruese dhe rrjedh rreth tyre nga ana e djathtë.
Siç mund ta shihni, gjithçka është në përputhje me algoritmin e mësipërm të paraqitjes. noton elementet.

Si përdoren notat

Ekzistojnë dy mënyra kryesore për të përdorur një pronë noton.
Le t'i konsiderojmë ato.

Mbështilleni tekstin rreth imazhit.

Në shënimin HTML, imazhet përdoren shpesh, dhe vetëm çdo element drejtkëndor. Vetia float përdoret gjerësisht për të mbajtur tekst rreth tyre dhe jo në vijën pas këtyre drejtkëndëshave.

Teksti mbështillet rreth imazhit me float: majtas

Shembull i paraqitjes së faqes me tekst të mbështjellë rreth imazhit.

CSS
img.alignleft (lundrues: majtas; margjina: 0 10px 10px 0)

Në kodin e mësipërm dhe elementin lundrues img dhe teksti i ambalazhimit janë brenda të njëjtit enë fq.
Vini re se mbushja është shtuar në CSS majtas dhe djathtas për elementin lundrues. Është praktikë e zakonshme për të shtuar hapësirë ​​midis imazhit dhe tekstit përreth.

Paraqitjet e kolonave

Pronës Noton lejon që dy elementë të bllokut të vendosen pranë njëri-tjetrit në vend që të fillojnë në një linjë të re. Kjo veti e floats është shumë e dobishme për krijimin e kolonave në një dokument. Për të marrë një plan urbanistik me 2 kolona, ​​mjafton të float (d.m.th. të vendosni veçorinë float) në dy DIV.
Një shembull i krijimit të një paraqitjeje me 2 kolona duke përdorur float.

HTML
‹Div id =" mbështjellës "›
‹Div id =" kolona e majtë "› ‹div›
‹Div id =" kolona e djathtë "› ‹/div›
‹/Div›

CSS
# kolonë majtas (lundrues: majtas)
# kolonë djathtas (lundrues: majtas)

Në shembull, të dy DIV-të e brendshme u zhvendosën në të majtë, duke rezultuar në 2 kolona. Duhet të siguroheni gjithashtu që gjerësia totale e dy kolonave të brendshme (div) të mos e kalojë gjerësinë e kutisë mëmë, përndryshe kolona e dytë do të hidhet në një pozicion të ri poshtë kolonës së parë.
Duke shtuar një ndarje të kokës mbi 2 kolona dhe një ndarje në fund të faqes duke përdorur veçori qartë, do të merrni një plan urbanistik të thjeshtë dhe të bukur me 2 kolona.

Dhe një këshillë tjetër. Vendosni gjithmonë gjerësinë e elementit të lundruar, përndryshe mund të merrni pasoja të padëshiruara.

Mbështetja e pronës float

Shpesh kur punoni me noton ndonjëherë është e nevojshme që elementët pasues të shënimit të mos vendosen pranë rrymës lundruese, por, si zakonisht, në rreshtin tjetër, domethënë, duhet të ktheheni në vendosjen e elementeve në përputhje me rrjedhën normale.
Kjo shpesh arrihet duke përdorur pronën qartë... Pronës qartë merr vlera majtas, djathtas, të dyja, asnjë(e parazgjedhur), dhe trashëgojnë... Në praktikë, përdoren 3 vlerat e para, dhe në shumicën dërrmuese të rasteve do të përdorni qartë: të dyja.
Më shpesh, ndoshta, qartë përdoret për të vendosur ndarjet e fundeve nën 2 ose 3 kolonat tuaja të lëvizshme.

Bej kujdes. Kur përdoret pas një elementi të lundruar në një kuti të re, rregullat me qartë, ju e ktheni këtë kuti në rrjedhën normale, por në të njëjtën kohë pronën e saj marzh-majë ndalon së punuari. Shpesh kjo situatë korrigjohet duke vendosur një div bosh me vetinë përpara kutisë së kërkuar në rrjedhën normale qartë —

... Për hir të drejtësisë, duhet theksuar se një teknikë e tillë konsiderohet teknikisht e saktë, por semantikisht e pasaktë, pasi shfaqet bosh në dokument div enë.

Enë notuese

Gjëja e parë që duhet të bëni kur përdorni një enë për elementët e lundrueshëm është të siguroheni që kontejneri të jetë mjaft i gjerë për t'i përshtatur elementët pranë njëri-tjetrit. Nëse vendosni në dy elementë vetinë noton: majtas për të krijuar një plan urbanistik me 2 kolona dhe gjerësia totale e elementeve është më e madhe se gjerësia e kontejnerit, atëherë njëri prej elementeve do të kalojë në rreshtin tjetër. Kjo do të ndodhë për faktin se kolona e dytë nuk do të ketë hapësirë ​​të mjaftueshme për të qëndruar në kutinë mëmë pranë kolonës 1. Më poshtë janë fotografitë që ilustrojnë një situatë të ngjashme.

E përmendëm më herët se elementët lundrues hiqen nga rrjedha normale e dokumentit. Kjo çon në një problem interesant dhe konfuz ku të gjithë elementët brenda kontejnerit notojnë. Ky është zakonisht rasti, për shembull, kur në kontejnerin div të kokës së faqes së internetit ka një imazh logoje me veçori noton: majtas... Në kokë gjithashtu, zakonisht me ndihmën e pronës sfond-imazh ofrohet çdo imazh i sfondit. Kjo shtohet në një enë në rrjedhë normale, e cila përmban një element lundrues dhe një element bosh në rrjedhë normale, pasi imazhi shfaqet në sfond. Problemi është se ndarja e kokës përmban vetëm një element jo bosh - një imazh të logos lundruese që ka dalë nga rrjedha normale. Prandaj shfletuesi e konsideron titullin div si bosh dhe e vendos lartësinë e tij në zero. Shpesh thuhet se kontejneri u shemb. Ka disa mënyra për të zgjidhur këtë problem. Mund të vendosni në mënyrë eksplicite lartësinë e ndarjes së kontejnerit të jetë të paktën lartësia e imazhit. Kjo do të funksionojë mirë për një titull si shembulli i mësipërm, por për një sërë arsyesh kjo nuk është gjithmonë e mundur. Ndonjëherë shtoni një div bosh me grupin e vetive qartë për të parandaluar notimin e artikujve të mëposhtëm.

HTML
‹Div class =" qartë "› ‹/div›

CSS
.e qartë (e qartë: të dyja;)

Kjo është e dobishme nëse ju lejohet të keni pak hapësirë ​​të bardhë pas elementëve të lundruar, sepse disa shfletues për div bosh mund të kenë vlera të paracaktuara fundore për lartësia, diferenca, mbushja etj.
Ekziston edhe një mënyrë për të përdorur pronën vërshoj në elementin prind. Zakonisht përdorni vërshoj: i fshehur por në varësi të situatës që mund të përdorni tejmbushje: auto ose vërshoj-y në vend që të përdoret kjo pronë në të dyja mënyrat. Duke përdorur një pronë vërshoj mbron kontejnerin mëmë nga shembja.

Çështjet e lundrimit

Përveç problemit të kolapsit të kontejnerit, prona float ka një sërë problemesh të tjera.
Versionet më të vjetra të Internet Explorer kanë një gabim të dyfishtë të dhëmbëzimit ( diferencë). Nëse elementet rrjedhin në të njëjtin drejtim dhe elementet shtohen gjithashtu diferencë në të njëjtin drejtim (majtas / majtas ose djathtas / djathtas), IE dyfishon madhësinë diferencë... Një zgjidhje e lehtë është vendosja e pronës shfaqja: inline për një element lundrues, nga rruga, kjo pronë ndihmon për të hequr qafe insektet e tjera të dëmshme të gomarit. Përndryshe, mund të përdorni komente të kushtëzuara për të vendosur specifikat diferencë për IE ose për versione individuale të IE.
Një problem tjetër është shtimi i elementeve brenda një elementi lundrues, ku gjerësia e elementeve të shtuar është më e madhe se gjerësia e kontejnerit. Për shembull, mund të shtoni një imazh në brendësi të një elementi të lundruar në mënyrë që gjerësia e imazhit të jetë më e madhe se gjerësia e kontejnerit. Në varësi të shfletuesit, kjo mund të bëjë që lundrimi juaj të jetë më i gjerë se sa synohej ose përmbajtja të mbivendoset imazhin tuaj. Sigurohuni që elementët brenda notuesit të mos e kalojnë gjerësinë e notuesit.
Ekziston edhe problemi i zhdukjes së mbushjes së poshtme ( marzh-fund). Mbushja e poshtme e një elementi lundrues brenda notave të tjera mund të injorohet. Zgjidhja është përdorimi mbushje në vend të diferencë nëse kjo ndodh.

Totalet e notave

Kur mësojnë CSS, fillestarët gravitojnë drejt pozicionimit absolut dhe relativ pasi duken më të lehtë. Por zakonisht është praktika më e mirë të përdoret float. Nëse mbani mend disa pika kyçe, do të keni një kuptim dhe kontroll të mirë të elementeve lundrues në paraqitjet tuaja.

• Elementet lundruese vendosen në rrjedhën normale të dokumentit, më pas kalojnë majtas ose djathtas brenda elementit prind dhe hiqen nga rrjedha normale e dokumentit.
• Etiketat e vlerave noton bëhen automatikisht elementë blloku.
• Blloku kuti me instaluar noton ndodhen pranë njëri-tjetrit për aq kohë sa ka hapësirë ​​të mjaftueshme për to. Nëse nuk ka hapësirë ​​të mjaftueshme në enë, ato do të shfaqen poshtë elementëve të lundruar.
• Gjerësia e kutisë me veçori të vendosur noton përcaktohet nga gjerësia e përmbajtjes së saj. Rekomandohet të vendosni gjerësinë e notimit për elementët kur shënoni, përndryshe rezultati mund të jetë i paparashikueshëm, rekomandimi nuk vlen për imazhet, pasi gjerësia nënkuptohet për to.
• Elementet lundrues dhe të pozicionuar janë të ndryshëm dhe sillen ndryshe. Ju nuk mund të përdorni pronat noton dhe pozicion në një artikull.
• Për të rivendosur veçorinë wrap për elementët pasues, përdorni veçorinë CSS qartë.
• Noton kutia nxirret nga rryma kryesore, kështu që elementët e bllokut në rrjedhë normale vendosen sikur të mos ishte aty, por kutitë inline të atyre elementeve bëjnë vend për bllokun lundrues.
• Një enë me elementë ekskluzivisht lundrues ka lartësi zero, pasi elementët float janë nxjerrë jashtë rrjedhës normale, kështu që prindi mendon se është bosh. Ka mënyra për të luftuar këtë efekt pa shënime shtesë, ju mund të njiheni me to, për shembull,.
• Ndryshe nga elementet kryesore, kufijtë vertikal noton kutitë nuk bashkohen me kufijtë e kutive fqinje.
• Gjeni zgjidhjet më të përshtatshme për ju për të zgjidhur çështjet e shfaqjes së saktë të elementeve float në Internet Explorer.

Shpresojmë që sa më sipër do t'ju ndihmojë të pastroni disa nga konfuzionet kur përdorni vetitë CSS. noton.

Vetia Float është një aset i fuqishëm dhe i fuqishëm për zhvilluesit e uebit HTML dhe CSS. Nga ana tjetër, mund të jetë zhgënjyese dhe konfuze nëse nuk e kuptoni plotësisht se si funksionon.

Përkthimi i një artikulli CSS Floats 101... Origjinali alistapart.com

Gjithashtu, në të kaluarën, për shkak të disa gabimeve mjaft të pakëndshme në shfletues, ishte normale të nervozoheshe kur përdore pronën noton në grupet tuaja të rregullave CSS. Por le të qetësojmë nervat tona dhe të përpiqemi të lehtësojmë zhgënjimin. Unë do t'ju tregoj saktësisht se çfarë i bën vetia float elementëve tuaj dhe sa i përshtatshëm është ta përdorni atë.

Ne shohim nota çdo ditë në botën e printimit kur shikojmë një artikull reviste me një imazh në të majtë ose në të djathtë dhe tekst të vendosur bukur rreth tij. Në botën HTML / CSS, teksti do të mbështillet rreth një imazhi në varësi të vetive float që aplikohet në atë imazh. Përdorimi i vetive float në një imazh është vetëm një shembull nga shumë. Si shembull, me vetinë float ne mund ta bëjmë shumë të lehtë paraqitjen popullore me dy kolona. Në fakt, ju mund të notoni çdo element në HTML-në tuaj. Pasi të keni mësuar dhe kuptuar përdorimin e veçorisë float, së bashku me veçorinë e pozicionit, mund të ndiheni rehat dhe të sigurt në krijimin e çdo paraqitjeje.

Përkufizimi i notit

Le të fillojmë duke përcaktuar se çfarë është noton.

Float është në mënyrë konvencionale një kuti që lëviz djathtas ose majtas përgjatë vijës aktuale. Karakteristika më interesante e float është se përmbajtja mund të rrjedhë përgjatë anës së saj. Kur përdorni veçorinë float: majtas, përmbajtja do të mbështillet rreth kutisë poshtë nga ana e djathtë, dhe në mënyrë të ngjashme me float: djathtas, poshtë nga ana e majtë.

Vetia float ka 4 vlera që mund të aplikojmë: majtas, djathtas, inherint dhe asnjë. Çdo kuptim është mjaft vetë-shpjegues. Për shembull, nëse notoni: majtas te një element, ai do të notojë në kufirin më të largët majtas të prindit të tij. Dhe, nëse vendosni float: djathtas, atëherë elementi në mënyrë të ngjashme do të lëvizë djathtas. Vlera ihnerit i thotë elementit të trashëgojë pronën nga prindi i tij. Dhe vlera e fundit "none" është e paracaktuar dhe thotë që të mos aplikohet vetia noton ndaj këtij artikulli.

#container (gjerësia: 960px; margjina: 0 automatik;) #content (float: majtas; gjerësia: 660px; sfond: #fff;) #navigacion (float: djathtas; gjerësia: 300px; sfond: #eee;) #footer ( qartë: të dyja; sfond: #aaa; mbushje: 10 px;)

#footeri ynë është ngecur nën bllokun e #navigimit. Kjo ndodhi sepse ka një vend për #footer nën bllokun #navigation dhe kjo është sjellja e duhur për rrjedhën normale të paraqitjes së bllokut. Por, kjo nuk është absolutisht ajo që duam, apo jo? Unë supozoj se ju tashmë mund të shihni marrëdhënien midis float dhe të qartë dhe të kuptoni se si ato plotësojnë njëra-tjetrën.

Nëse keni një çrregullim obsesiv-kompulsiv si unë, mund të keni vënë re në Shembullin F lartësitë e ndryshme të kolonave #content dhe #navigation; ka disa zgjidhje, por kjo është përtej qëllimit të këtij artikulli. Unë rekomandoj shumë të lexoni Kolonat Faux nga Dan Cederholm për të mësuar se si të bëni blloqe me të njëjtën lartësi, pavarësisht nga përmbajtja brenda.

Fluturoni së pari

Deri më tani, ne kemi parë disa shembuj mjaft të thjeshtë që nuk krijojnë shumë dhimbje koke. Megjithatë, ka disa gracka që duhen marrë parasysh kur përdorni pronën float. Çuditërisht, një nga kurthet më të mëdha nuk është CSS, por HTML. Vendosja e elementit tuaj të lundruar brenda HTML-së tuaj mund të prodhojë rezultate të ndryshme. Hidhini një sy shembullit H.

Këtu kemi një bllok të vogël që ka një lundrues: imazhi i djathtë me tekst që e rrethon. CSS-ja jonë duket kështu:

#container (gjerësia: 280 px; margjina: 0 automatik; mbushja: 10 px; sfondi: #aaa; kufiri: 1 px solid # 999;) img (float: djathtas;)

Elementi ynë prind, #container, ka një gjerësi të ngushtë dhe e mban elementin tonë të lëvizur (imazhin) brenda kufijve të tij. Kodi ynë HTML duket si ky:

Ky shembull na jep rezultatin e dëshiruar, por çka nëse marrim dhe riorganizojmë disa elementë në HTML? Në shembullin I, unë lëviza pas tekstit

Rezultati ynë nuk është ai që prisnim. Imazhi ynë është zhvendosur djathtas, por nuk është më në këndin e sipërm siç duam, por ka rënë poshtë paragrafit; edhe më keq, ajo del nga fundi i prindit tonë të #container. Cfare po ndodh?

Së pari. Rregulli im i përgjithshëm që kam gjetur për veten time është të notoj elementet së pari. Në HTML-në time, unë pothuajse gjithmonë shtoj elementë të lundruar në fillim të shënimit tim, dhe përballë elementëve të mi të preferuar jo të lëvizshëm me të cilët do të ndërveprojnë elementët e mi të lëvizur, siç është paragrafi në shembullin e mësipërm. Në shumicën e rasteve, kjo jep një rezultat pozitiv.

Së dyti. Arsyeja pse imazhi duket se del jashtë në fund të bllokut tonë të #kontejnerëve ka të bëjë me diçka që quhet kolaps. Le të flasim për kolapsin dhe opsionet e zgjidhjes.

Duke u shembur

Kolaps është kur një element që ka ndonjë numër elementësh të lundruar nuk do t'i zgjerojë kufijtë e tij rreth elementeve të mbivendosur, siç do të ndodhte nëse elementët e mbivendosur nuk do të ishin pluskuar.

Tani le të përpiqemi ta rregullojmë këtë me CSS në vend që të shtojmë shënime shtesë HTML në dokumentin tonë siç bëmë më parë. Ekziston një metodë që lejon elementin prind të "aplikojë" pronën e qartë pas të gjithë elementëve të lundruar. Për ta bërë këtë, përdorni veçorinë CSS tejmbushje me vlerën e fshehur. Ju lutemi, vini re se vetia e tejmbushjes nuk ishte menduar për këtë përdorim dhe mund të shkaktojë disa probleme, të tilla si fshehja e përmbajtjes ose shfaqja e një shiriti të padëshiruar të lëvizjes. Për shembullin tonë, sidoqoftë, ne do të zbatojmë përsëri tejmbushjen: pronë e fshehur në #container tonë prind:

#container (mbushja: e fshehur; gjerësia: 260 pikselë; diferenca: 0 automatik; mbushja: 10 px 0 10 px 10 px; sfondi: #aaa; kufiri: 1 px solid # 999;)

Dhe së fundi, Eric Meyer shpjegon zgjidhjen e tretë të këtij problemi në artikullin e tij Containing Floats. Sipas CSS Spec 2.1:

një element me vetinë float do të zgjerojë kufijtë e tij për elementët float brenda.

Kështu, duke aplikuar veçorinë float në #container, kontejneri ynë do të përmbajë imazhin dhe paragrafin tonë, të ngjashëm me metodat e përshkruara më sipër.

Në fund të fundit, të gjitha këto vendime bëjnë të njëjtën gjë. Ata i bëjnë elementët mëmë të numërojnë elementët e tyre të lëvizur në rrjedhë. Secila prej metodave ka meritat dhe dobinë e saj. Ju duhet të kuptoni secilën prej tyre dhe më pas të aplikoni ato që funksionojnë më mirë për situatën tuaj.

konkluzioni

Duke përdorur veçorinë float ju mund të përmirësoni në mënyrë dramatike teknikën tuaj të paraqitjes. Të kuptuarit se si funksionon kjo pronë dhe çfarë ndikon në sjelljen e saj do t'ju japë një bazë të fortë për përdorimin efektiv të notave.

Në dizajnin modern të uebit, prona noton përdoret pothuajse në çdo hap. Por pavarësisht nga kjo përhapje, jo të gjithë e kuptojnë mekanizmin e funksionimit të blloqeve lundruese, sjelljen e tyre dhe çfarë pasojash mund të ketë nga përdorimi i tyre.

Çfarë është "float"?

Notonështë një pronë e pozicionimit CSS. Për të kuptuar thelbin dhe origjinën e tij, duhet t'i kushtoni vëmendje dizajnit të printimit. Në paraqitjet e printuara, imazhi mund të pozicionohet në mënyrë që teksti të rrjedhë rreth tij. Kjo zakonisht quhet " mbështjell tekstin".

Në paraqitjen e faqes, blloku që përmban tekstin mund të specifikohet për t'u përdorur mbështillni tekstin rreth një imazhi ose injoroni mbështjelljen. Injorimi i mbështjelljes së tekstit do të lejojë që fjalët të rrjedhin mbi imazhin sikur të mos ishte aty. Ky është ndryshimi nëse imazhi është pjesë e rrjedhës në faqe apo jo. Në dizajnin e uebit, gjithçka është shumë e ngjashme.

Në dizajnin e uebit, një element me një veti CSS aplikohet në të noton do të sillet si një imazh me tekst të mbështjellë rreth tij në një plan urbanistik të printuar. Elementet lundruese mbeten pjesë e rrjedhës së faqes së internetit. Kjo nuk është aspak e njëjtë me elementët e pozicionuar absolutisht, të cilët hiqen nga rrjedha, sikur në paraqitjen e printimit blloku i tekstit të ishte udhëzuar të injoronte mbështjelljen rreth imazhit. Elementet e pozicionuar absolutisht nuk ndikojnë në vendosjen e elementeve të tjerë, dhe elementët e tjerë nuk ndikojnë në vendosjen e tyre.

Vendosja e një prone noton për elementët që përdorin CSS duket kështu:

#shirit anësor (lundrues: djathtas;)

Ekzistojnë katër vlera të vlefshme për pronën noton - majtas, drejtë, asnje, trashëgojnë... Dy te parat, majtas dhe drejtë tregoni drejtimet e vendndodhjes - majtas dhe djathtas, përkatësisht. Asnje- vlera e paracaktuar, tregon që elementi nuk është lundrues dhe trashëgojnë duke udhëzuar elementin të trashëgojë vlerën e pasurisë noton nga elementi mëmë.

Për çfarë përdoret float?

Përveç një shembulli të thjeshtë të mbështjelljes së tekstit rreth një imazhi, noton mund të përdoret për të krijuar paraqitje në internet.

Noton, gjithashtu i dobishëm për elementë të vegjël të paraqitjes. Për shembull, merrni këtë fragment të vogël të një faqe interneti. Nëse vendosim pronën noton për një imazh të vogël avatar, atëherë kur ndryshon madhësia e imazhit, mbështjellja do të ndryshojë në përputhje me dimensionet e reja të imazhit:

E njëjta paraqitje mund të zbatohet duke përdorur pozicionimin relativ të kontejnerit dhe pozicionimin absolut të avatarit dhe tekstit në të. Por në një paraqitje të zbatuar sipas kësaj skeme, ndryshimi i madhësisë së figurës nuk do të ndikojë në bllokun e tekstit, pasi elementët me pozicionim absolut nuk ndikojnë në elementë të tjerë dhe elementë të tjerë nuk ndikojnë në to.

Rivendos mbështjellësin

Qartë pronë e lidhur me pronën noton... Element me veti të vendosur qartë nuk do të lëvizë lart kur rrjedh rreth një elementi me një veçori të caktuar noton por do të notojë poshtë duke injoruar mbështjelljen. Dhe përsëri, një ilustrim që do të shpjegojë gjithçka pa vonesë.

Në shembullin e mësipërm, shiriti anësor lundronte në të djathtë të bllokut kryesor të përmbajtjes. Fundi është zhvendosur në një vend bosh nën shiritin anësor, duke u mbështjellë rreth bllokut kryesor të përmbajtjes. Për të zgjidhur këtë problem, duhet të specifikoni një vlerë për të qartë: të dyja vetitë e "footer" për të "pastruar" mbështjelljen rreth të dy kolonave.

#footer (e qartë: të dyja;)

Pronës qartë ka katër kuptime. te dyja përdoret për të rivendosur mbështjelljen në të dy drejtimet. Majtas dhe E drejta përdoren për të rivendosur një drejtim - majtas ose djathtas, përkatësisht. Asnjeështë parazgjedhja. trashëgojnë mund të jetë vlera e 5-të, por çuditërisht nuk mbështetet Internet Explorer... Rivendosja vetëm e rrjedhës majtas ose djathtas është mjaft e rrallë, por ka përfitime praktike.

Shembje e madhe

Një gjë për të bërë me noton e çuditshme është se çfarë efekti ka kjo veti në elementët mëmë. Nëse elementi mëmë nuk përmban elementë të tjerë përveç një notues, atëherë lartësia e tij fjalë për fjalë shembet. Kjo nuk është gjithmonë e dukshme, veçanërisht nëse prindi nuk ka një sfond të dukshëm, por është e rëndësishme ta mbani këtë parasysh.

Por alternativa për një kolaps të tillë është edhe më e keqe. Merrni parasysh skenarin e mëposhtëm:

Nëse kutia e sipërme zgjerohet automatikisht për të akomoduar elementin lundrues, atëherë marrim një ndërprerje në rrjedhën e tekstit midis paragrafëve, pa mundësinë e eliminimit të tij. Nëse do të ishte kështu, atëherë zhvilluesit do të ankoheshin shumë më shpesh për këtë sjellje të blloqeve lundruese sesa për kolapsin tani.

Kolapsi duhet mbajtur gjithmonë parasysh për të parandaluar sjelljen e çuditshme të paraqitjes dhe problemet e ndër-shfletuesve. Ne mund ta zgjidhim këtë problem duke përdorur qartë pas elementit lundrues në enë, por përpara se ena të mbyllet.

Teknikat e anulimit të mbështjelljes

Nëse jeni në një situatë ku e dini se ku do të jetë elementi tjetër, mund të përdorni të qartë: të dyja dhe shkoni në biznesin tuaj. Kjo është ideale pasi nuk kërkon ndonjë hakim ose elementë shtesë. Por për fat të keq, zakonisht jo gjithçka shkon siç duam, dhe në këtë rast, mund të përdorni mjetet e mëposhtme.

Metoda e bllokut bosh.

Është fjalë për fjalë një bllok bosh.

... Ndonjëherë mund të gjesh elementin
ose ndonjë element tjetër të rastësishëm, por div është më i zakonshmi pasi nuk ka stil të paracaktuar në shfletues, nuk ka funksion të veçantë dhe nuk ka gjasa të jetë në stilin e përgjithshëm CSS. Kjo metodë refuzohet nga puristët semantikë sepse prania e saj nuk ka asnjë kuptim kontekstual në faqe dhe është aty vetëm për paraqitje. Sigurisht, në një kuptim të ngushtë, ata kanë të drejtë, por ai bën punën e tij dhe nuk i bën keq askujt.

Metoda e tejmbushjes.

Bazuar në specifikimin e një vetie CSS vërshoj për elementin prind. Nëse kjo veti është caktuar në auto ose i fshehur për elementin prind, atëherë ai do të zgjerohet pas elementit të lundruar, duke pastruar efektivisht float rreth tij për elementët pasues. Kjo metodë mund të jetë e bukur semantikisht pasi nuk kërkon elemente shtesë. Megjithatë, siç mund ta shihni, ne kemi shtuar një të re div për të përdorur këtë metodë, e cila është e barabartë me përdorimin e një blloku bosh josemantik dhe është më pak fleksibël. Duhet mbajtur mend gjithashtu se prona vërshoj nuk ka për qëllim të çaktivizojë mbështjelljen. Kini kujdes që të mos fshehni aksidentalisht përmbajtjen ose të mos shkaktoni shirita të padëshiruar të lëvizjes.

Metoda e thjeshtë e pastrimit.

Përdor një pseudo-zgjedhës CSS (: pas) për të hequr mbështjelljen. Në vend të përdorimit të pronës vërshoj për elementin prind, vendosni një klasë shtesë për të, për shembull "clearfix" dhe përdorni stilin e mëposhtëm CSS:

Rregullimi i qartë: pas (përmbajtja: "."; Dukshmëria: e fshehur; shfaqja: bllok; lartësia: 0; e qartë: të dyja;)

Ai përdor një pjesë të vogël të përmbajtjes që është e fshehur nga pamja, e vendosur pas elementit prind, i cili heq mbështjelljen. Kjo metodë nuk është e plotë, pasi duhet të jetë e shtrenjtë për të mbështetur shfletuesit e vjetër.

Situata të ndryshme kërkojnë metoda të ndryshme për të rivendosur notimin. Le të marrim një rrjet të llojeve të ndryshme të blloqeve si shembull.

Për një integrim më të mirë vizual të blloqeve të ngjashme, duhet të fillojmë një linjë të re kur ngjyra ndryshon. Ne mund të përdorim metodën e tejmbushjes ose dritës së qartë nëse çdo grup ngjyrash ka një prind. Ose përdorni metodën e bllokut bosh midis grupeve. Tre blloqe mëmë që nuk ekzistonin më parë, ose tre blloqe boshe që nuk ekzistonin më parë. Varet nga ju që të vendosni se cila metodë është më e mira.

Probleme me elementët lundrues

Elementet lundrues shpesh kritikohen për brishtësinë e tyre. Pjesa më e madhe e kësaj brishtësie vjen nga IE6 dhe ai gabime të orientuara drejt notit... Por ndërsa gjithnjë e më shumë zhvillues po heqin mbështetjen për IE6, nuk duhet të mendoni për të, por për ata që kujdesen për pajtueshmërinë, këtu është një listë e shkurtër.

Pushdown, është një simptomë që një element brenda një kutie lundruese është më i gjerë se kjo kuti (kjo ndodh zakonisht me imazhet). Shumica e shfletuesve do të shfaqin pjesën e dalë të elementit lundrues, por kjo nuk do të ndikojë në paraqitjen. IE do të zgjerojë kutinë lundruese dhe shpesh ka një efekt drastik në paraqitjen. Një shembull tipik është një imazh që del jashtë bllokut kryesor të përmbajtjes, duke e shtyrë shiritin anësor poshtë.

Zgjidhja e shpejtë e problemit: përdor tejmbushjen: i fshehur; për të prerë tepricën.

Gabim me marzh të dyfishtëështë një tjetër gjë që duhet mbajtur parasysh kur punoni me IE6. Ky bug shprehet në faktin se nëse fusha është në të njëjtën anë ku është e orientuar noton, fusha është dyfishuar. Për shembull:

Ne do të marrim diferencën e majtë 40 px., në vend të 20 px.

Zgjidhja e shpejtë e problemit: vendosni ekranin: inline për bllokun e lundruar dhe mos u shqetësoni se elementi do të mbetet i bllokuar.

3px Jog... Thelbi i këtij gabimi është se teksti i vendosur pranë elementit lundrues zhvendoset çuditërisht me tre piksel, sikur nën ndikimin e fushës së forcës që ndodhet rreth elementit lundrues. Zgjidhja e shpejtë e problemit: Vendosni gjerësinë dhe lartësinë e tekstit të prekur.

Në IE7 shfaqet Gabim i kufirit të poshtëm kur prindi është lundrues dhe prindi i tij është gjithashtu lundrues. Pjesa e poshtme e diferencës së fëmijës injorohet nga elementi paraardhës. Zgjidhja e shpejtë e problemit: Përdorni padding-bottom në prind në vend të margin-fund të fëmijës.