Isticmaalidda CSS float Hantida Layoutka Web Design
Hantida CSS waa hanti aad u muhiim ah qaabeynta. Waxay kuu ogolaaneysaa inaad dejiso qaabka boggaaga internetka sida aad rabto inay soo bandhigaan-laakiin si aad u isticmaasho waa inaad fahamtaa sida ay u shaqeyso.
Qoraalka qaab-dhismeedka, dhismaha CSS wuxuu u eg yahay tan:
.suureed {float: right; }
Tani waxay sheegaysaa browser-yada in wax kasta oo fasal ah "sax" ay tahay in loo rogo midigta.
Waxaad ku meelayn kartaa sidan oo kale:
fasalka = "sax" />
Maxaad ku Fadhiisan kartaa CSS float Property?
Kuma liqi kartid shay kasta oo ku yaal bogga internetka. Waxaad ku dulsami kartaa oo kaliya halbeegyada heerka block . Kuwani waa arrimo ka soo qaada meel bannaan oo ku yaal bogga, sida sawirada (), qaybaha (), qaybta (), iyo liisaska ().
Waxyaabaha kale ee saameeya qoraalka, laakiin ha abuurin sanduuq ku yaal bogga waxaa loo yaqaannaa xubno asal ah oo aan la dabooli karin. Kuwani waa jaantusyada sida span (), fasaxyada (), xoogga xoogan (), ama shealsics ().
Halkee Ayuu Dhigaa?
Waxaad ku dabooli kartaa xubno dhinaca midig ama bidix. Qayb kasta oo soo socota waxa soo raacaya walxaha daboolan waxay ku dul socon doonaan qaybta dusheeda ku taal dhinaca kale.
Tusaale ahaan, haddii aan ku sawirto muuqaal dhinaca bidixda, qoraal kasta ama waxyaabo kale oo soo socda waa ay ku socon doontaa dhinaca midigta. Haddii aan sawir u muuqdo dhinaca midig, qoraal kasta ama qodobo kale oo soo socda waxay ku socon doontaa hareeraha bidixda. Sawirka lagu dhejiyo qoraalka qoraalka ah iyada oo aan la isticmaalin qaab muuqaal ah oo lagu dabaqi karo waxaase soo baxaya sawir-koodhka si loo eego sawirrada.
Tani inta badan waxay la socotaa xariiqda koowaad ee soo socota qoraalka lagu soo bandhigay xagga hoose ee sawirka.
Intee ayay ku sii faani doonaan?
Nooca loo yaqaan " floated" wuxuu u dhaqaaqi doonaa dhinaca bidix ama midig ee weelka weelka hadba sida uu awood u leeyahay. Tani waxay keenaysaa dhowr xaaladood oo kala duwan iyadoo ku xiran hadba sida koodhkaagu u qoran yahay.
Tusaalooyinkan, waxaan ku dhex jiri doonaa qayb yar oo DIV ah dhanka bidix:
- Haddii walxaha daboolan uusan lahayn ballan horay loo qoondeeyey, waxay u qaadan doontaa meesha ugu sarreysa sida loo baahan yahay iyo la heli karo, iyadoon loo eegin float. Fiiro gaar ah: Dareemayaasha qaarkood waxay isku dayaan in ay ku dhejiyaan waxyaabo ay ku jiraan xubno dabaqan leh marka ballaaran aan la qeexeynin-badanaa waxay bixiyaan unugyada aan dusha laheyn oo kaliya meel yar oo bannaan. Sidaas awgeed waa in aad had iyo jeer qeexdid ballaarid ku saabsan qaybaha dabaqyada leh.
- Haddii weelka weelku yahay jaantuska HTML, DIV-ka dusha sare wuxuu ku fadhiisan doonaa dhinaca bidix ee bogga.
- Haddii walxaha weelka uu ku jiro wax kale, DIV wuxuu ku fariisan doonaa weelka bidix ee weelka.
- Waxaad ku dabooli kartaa walxaha dabaqyada leh, taasina waxay keeni kartaa in ay soo baxdo meelo la yaab leh. Tusaale ahaan, buqashadani waa DIV-ka bidix ee gudaha DIV-ka midigta leh.
- Walxaha qarxa ayaa fadhiya midba midka kale haddii ay jirto qol ku yaal weelka. Tusaale ahaan, weelkani waxa uu leeyahay sadex qaybood oo ah 100px ballaaran oo DIV ah oo ku jira 400px oo balaadhan oo ballaaran.
Xitaa waxaad isticmaali kartaa balaastig si aad u sameysid qaab sawir oo sawir leh. Waxaad tusinaysaa thumbnail (waxay u shaqaysaa marka ugu fiican marka ay isku wada mid yihiin) DIV oo leh cinwaanka iyo dusha qaybta DIV ee weelka.
Muuqaal kasta oo ay ka muuqato daaqada browser-ka, sawirada yaryar ayaa si siman u habaynaya.
Jooji Dhulka
Markaad ogaatid sida loo helo wax lagu yaqaano, waxaa muhiim ah in la ogaado sida loo damiyo daboolka. Waxaad damisaa dabaqa leh CSS cad cad. Waxaad ka nadiifin kartaa saqafka bidix, sifooyinka saxda ah ama labadaba:
cad: bidix;
caddayn: xaq;
caddayn: labadaba;
Qodob kasta oo aad u dejisid hantida cad ee ka muuqda waxay ka muuqan doontaa hoosta sheyga oo u jiheysan jihadaas. Tusaale ahaan, tusaalahan labo qeybood ee hore ee qoraalka lama tirtirin, laakiin saddexaad waa.
Kala ciyaara qiimaha cad ee astaamaha kala duwan ee dukumintiyadaada si aad u hesho saameyno kala duwan.
Mid ka mid ah mawduucyada ugu xiisaha badan ayaa ah sawirro taxane ah oo ka hooseeya midigta ama bidixda ku xigta cutubyada qoraalka. Xitaa haddii qoraalka uusan ahayn mid ku filan oo lagu soo rogi karo sawirkii, waxaad isticmaali kartaa sawirada dhammaan sawirada si aad u hubiso in ay ka muuqdaan santoon halkii ay kuxiran lahaayeen sawirka hore.
HTML (ku celi cutubkan):
Duis waa in ay macquul ah si ay u noqdaan kuwo ku dheehan tahay in ay isha ku hayaan. Cupidatat aan shaki ku jirin, ka mid ah shaqsiyadeed iyo khibrad.
CSS (si loogu sawirro sawirrada bidixda):
img.float {float: left;
cad: bidix;
margin: 5px;
}
Iyo midigta:
img.float {float: right;
caddayn: xaq;
margin: 5px;
}
Isticmaalida Floats for Daydada
Markaad fahamto sida hantida dhulku u shaqeyso, waxaad bilaabi kartaa inaad isticmaasho si aad uqoreeysid bogaga internetka. Kuwani waa tallaabooyinka aan qaato si aan u abuuro bog bog leh:
- Diyaarso qaabeynta (warqad ama qalab sawir ama madaxayga).
- Go'aanso meesha qaybaha bogga ay noqonayaan.
- Go'aami balaarinta weelasha kala duwan iyo walxaha ku jira.
- Dhaqdhaqaaqa wax walba. Xitaa qaybta ugu dambeysa ee weelka ayaa la daboolay dhinaca bidix si aan u ogaado meesha ay noqon doonto marka la eego dekedda aragtida browserka.
Ilaa intaad ogaatid balaarinta (boqolleyda waa mid fiican) qaybahaaga qaabeynta, waxaad isticmaali kartaa hantida qulqulka si aad u gashid meesha ay ka tirsan yihiin bogga. Waxyaabaha wanaagsani waa, uma baahnid inaad ka walwasho habka sanduuqa ee ka duwan kuwa Internet Explorer ama Firefox.