Օգտագործելով CSS- ը float- ի գաղափարը Web Page Layouts- ի նախագծման համար
CSS- ի գույքը դասավորության համար շատ կարեւոր հատկություն է: Այն թույլ է տալիս տեղադրել ձեր վեբ էջի դիզայնը այնպես, ինչպես ցանկանում եք ցուցադրել, բայց այն օգտագործելիս պետք է հասկանալ, թե ինչպես է այն աշխատում:
Մի ոճի թերթիկում CSS- ը float գույքը կարծես սա:
ուղղակի {float: right; }
Սա պատմում է զննարկիչին, որ «աջից» դասի հետ ամեն ինչ պետք է լցվի աջ:
Դուք կստանաք այն նման:
class = "right" />
Ինչ կարող եք Float- ի հետ CSS- ը float Property- ը:
Դուք չեք կարող float ամեն տարրը վեբ էջում: Դուք կարող եք միայն բլոկ-մակարդակի տարրեր բարձրանալ: Սրանք այն տարրերն են, որոնք էջում բլոկ վերցնում են, ինչպես պատկերները (), պարբերությունները (), ստորաբաժանումները () եւ ցուցակները ():
Այլ տարրեր, որոնք ազդում են տեքստի վրա, բայց էջում արկղ չեն ստեղծում, կոչվում են գծային տարրեր եւ չեն կարող floated: Սրանք տարրեր են, ինչպիսիք են span (), գծի ընդմիջումները (), ուժեղ շեշտադրումը () կամ շեղագիր ():
Որտեղ են նրանք փչում:
Դուք կարող եք բարձրանալ էլեմենտներ դեպի աջ կամ ձախ: Ցանկացած տարր, որը հետեւում է լողացող տարրին, կընթանա մյուս կողմի լողացող տարրերի շուրջ:
Օրինակ, եթե ես նկարում եմ ձախ կողմում, այն բանից հետո, երբ տեքստը կամ մյուս տարրերը հետեւում են դրա շուրջ, այն կընկնի դեպի աջ: Եվ եթե ես պատկերն իջնում էի աջից, ապա այն ետեւում գտնվող ցանկացած տեքստ կամ այլ տարր կթողնի այն դեպի ձախ: Պատկերը, որը տեղադրվում է տեքստի բլոկում, առանց դրա վրա կիրառվող որեւէ բոցաձեւի, կցուցադրվի, սակայն զննարկիչը դրված է պատկերներ ցուցադրելու համար:
Սա սովորաբար պատկերի ներքեւում ցուցադրված հետեւյալ տեքստի առաջին տողն է:
Որքան նրանք կլանեն
Տարածված տարրը կբարձրանա մինչեւ կոնտեյների տարրի ձախ կամ աջ: Սա հանգեցնում է մի քանի տարբեր իրավիճակներում, կախված նրանից, թե ինչպես է ձեր կոդը գրված:
Այս օրինակների համար ես կլուսավորեմ փոքր DIV տարրը ձախ:
- Եթե լողացող տարրը չունի նախապես սահմանված լայնություն, այն կպահանջվի այնքան հորիզոնական տարածք, որքան պահանջվում է եւ մատչելի, անկախ նրանից, Նշում. Որոշ բրաուզերները փորձել են տարրեր տեղադրել floated տարրերի կողքին, երբ լայնությունը չի սահմանվում, սովորաբար ոչ լողացող տարրը տալիս է միայն փոքր քանակությամբ տարածք: Այսպիսով, դուք պետք է միշտ սահմանեք լողացող տարրերի լայնությունը :
- Եթե բեռնարկղի տարրը HTML տարրն է, ապա լողացող DIV- ն նստելու է էջի ձախ եզրին:
- Եթե կոնտեյնային տարրը ինքնին պարունակում է այլ բան, ապա լողացող DIV- ը կտեղավորվի կոնտեյների ձախ եզրին:
- Դուք կարող եք բոցել տարող տարրերը, եւ դա կարող է հանգեցնել այն բանի, որ ապշեցուցիչ վայրում ավարտվում է բոցը: Օրինակ, այս բոցը ձախողված DIV- ն է, որը տեղադրված է DIV- ի աջ կողմում:
- Կեղտոտ տարրերը կընկնեն միմյանց կողքին, եթե կոնտեյներով սենյակ կա: Օրինակ, այս կոնտեյն ունի երեք 100px լայն DIV տարրեր, որոնք floated է 400px լայն կոնտեյներով.
Դուք նույնիսկ կարող եք օգտագործել փուչիկները `լուսանկարների պատկերների ձեւավորումը ստեղծելու համար: Դուք նկարագրում եք յուրաքանչյուր նմուշ (այն աշխատում է լավագույն դեպքում, երբ դրանք միեւնույն չափով են), DIV- ով եւ վերնագրով DIV- ի տարրերը բեռնարկղում:
Անկախ նրանից, թե որքան լայն է բրաուզերի պատուհանը, մանրապատկերները համաչափ են:
Անջատելով լողացողը
Երբ դուք գիտեք, թե ինչպես ստանալ տարրը բոցելու համար, կարեւոր է իմանալ, թե ինչպես պետք է անջատեք բոցը: Դուք անջատեք բոցը CSS- ի հստակ գույքի հետ: Դուք կարող եք մաքրել ձախ բոցերը, ճիշտ փչում կամ երկուսն էլ:
պարզ: ձախ;
պարզ: աջ;
պարզ: երկուսն էլ;
Ցանկացած տարր, որը դուք սահմանել եք հստակ գույքը , կհայտնվի այն ստորին տարրը, որը շարժվում է այդ ուղղությամբ: Օրինակ, այս օրինակում տեքստի առաջին երկու պարբերությունները չեն մաքրվում, բայց երրորդը:
Խաղալ ձեր փաստաթղթերում տարբեր տարրերի հստակ արժեքով `տարբեր դասավորության հետեւանքների ստանալու համար:
Ամենահետաքրքիր փորագրված դասավորումներից մեկը տեքստի պարբերությունների կողքին գտնվող աջ կամ ձախ սյունի ներքեւում նկարների շարք է: Նույնիսկ եթե տեքստը բավականաչափ երկար չէ, որպեսզի պատկերն անցնեն, դուք կարող եք մաքրել բոլոր պատկերները, որպեսզի համոզվեք, որ դրանք հայտնվում են սյունակում, նախորդ պատկերի կողքին:
HTML (կրկնել այս պարբերությունը).
Դուռը ինքնասպանություն է գործել, որը կարող է խանգարել ներխուժմանը: Ոչ ոք չգիտի, թե ինչ է կատարվում եւ աշխատում է:
CSS- ը (պատկերները ձախողելու համար).
img.float {float: ձախ;
պարզ: ձախ;
margin: 5px;
}
Իսկ աջ:
img.float {float: աջ;
պարզ: աջ;
margin: 5px;
}
Օգտագործելով ճարմանդներ Layout- ի համար
Երբ հասկանում եք, թե ինչպես է float- ի գույքը աշխատում է, դուք կարող եք սկսել այն օգտագործել այն ձեր վեբ էջերը տեղադրելու համար: Սրանք այն քայլերը, որոնք ես վերցնում եմ, հարթ վեբ էջ ստեղծելու համար.
- Դիզայնի դասավորությունը (թղթի կամ գրաֆիկայի գործիքի կամ իմ գլխում):
- Որոշեք, թե որտեղ էջի բաժինները կլինեն:
- Որոշեք տարբեր բեռնարկղերի լայնությունները եւ նրանց մեջ գտնվող տարրերը:
- Լողալ ամեն ինչ: Նույնիսկ ամենաթանկ տարրը թողարկվում է դեպի ձախ, որպեսզի ես իմանամ, թե որտեղ է լինելու բրաուզերի դիտման նավահանգիստը:
Քանի դեռ իմանում եք ձեր դասավորության հատվածների լայնությունները (տոկոսները լավ են), կարող եք օգտագործել float հատկությունը, դրանք տեղադրելու էջում: Իսկ լավ բանը, դուք պետք է անհանգստանաք, որքան Internet Explorer- ի կամ Firefox- ի համար տարբերվող տուփի մոդելի մասին: