ungathanda ukwazi ukuthi kanjani beka phakathi isithombe ku-DIV? Ukubeka isithombe phakathi nendawo ku-DIV kungaba usizo ekuthuthukiseni ukubukeka nokuhleleka kwekhasi lakho lewebhu, kanye nokugqamisa isithombe ofuna ukusiveza. Beka phakathi isithombe ku-DIV akunzima, kodwa kuya ngezinto ezimbalwa ezifana nohlobo lwesithombe, usayizi we-DIV, isitayela se-DIV, njll.
Kulesi sihloko sizochaza ungamisa kanjani isithombe phakathi nendawo ku-DIV usebenzisa i-HTML ne-CSS, okuyizilimi zokuhlela ezisetshenziselwa ukwakha nokuklama amakhasi ewebhu. Sizokukhombisa izindlela nezibonelo ezimbalwa ukuze ukwazi ukukhetha ekufanele kakhulu.
Yini i-DIV
I-div iyisici se-HTML esisetshenziselwa dala izingxenye noma iziqukathi ekhasini lewebhu. Lokhu kungase kuqukathe ezinye izici, njengombhalo, izithombe, izixhumanisi, njll. Ukwengeza, lokhu kuyisici se-block, okusho ukuthi sithatha lonke ububanzi bekhasi nalokho ungachaza ubude nobubanzi bayo. I-div iyisici esijwayelekile, okusho ukuthi ayinayo incazelo ye-semantic ethile. Ngalesi sizathu, ngokuvamile isetshenziswa nesigaba noma izibaluli ze-id, ukunikeza igama noma isigaba ku-div. Ibuye isetshenziswe kaningi nge isibaluli sesitayela noma ngamashidi esitayela se-CSS, ukunikeza ukubukeka noma isakhiwo ku-div.
I-div isetshenziselwa ukuhlela nokuhlela okuqukethwe kwekhasi lewebhu, nokusebenzisa izakhiwo zesitayela kulo. Nge-div ungakha ibhokisi eliqukethe ezinye izakhi, futhi elingaqondaniswa, libe phakathi nendawo, libe nombala, lifakwe ukumthunzi, njll. Ifomethi ingasetshenziswa futhi dala amakholomu noma imigqa, ukusabalalisa okuqukethwe ngendlela ehlelekile nevumelana nezimo. Ngokuvamile ingasetshenziswa futhi ukudala imiphumela ebonakalayo noma yokusebenzisana, njengokugqwayiza, ukuguqulwa, ukuguqulwa, njll.
Indlela yokubeka isithombe phakathi nendawo ngokuvundlile
Misa isithombe sivundlile ku-DIV kusho ukuqondisa isithombe phakathi nendawo yobubanzi be-DIV. Kunezindlela ezimbalwa zokwenza, kodwa ezivame kakhulu yilezi ezilandelayo:
- Sebenzisa ukuqondanisa umbhalo: indawo emaphakathi. Lesi sici sisetshenziswa esakhiweni se-DIV futhi sibangela zonke izici ezingaphakathi kwe-DIV ukuthi ziqondaniswe namaphakathi ngokuvundlile. Ngokwesibonelo:
- Sebenzisa imajini: impahla ezenzakalelayo. Lesi sici sisetshenziswa esakhiweni se-IMG futhi sibangela ukuthi isithombe sibe namamajini afanayo kwesokunxele nakwesokudla, okusibeka maphakathi nendawo sivundlile. Ukuze sisebenze, isithombe kufanele sibe nobubanzi obuchaziwe futhi sibe uhlobo lwebhulokhi noma sibe nesibonisi sendawo: ibhulokhi. Ngokwesibonelo:
- Sebenzisa isakhiwo sokuguqula: translateX(). Lesi sici sisetshenziswa esakhiweni se-IMG futhi sibangela ukuthi isithombe sihambe sivundlile ibanga elithile ukusuka endaweni yaso yasekuqaleni. Ukuze uyibeke phakathi nendawo ngokuvundlile, kufanele uyihambise kwesokudla ngo-50% wobubanzi bayo. Ukuze sisebenze, isithombe kufanele sibe nobubanzi obuchaziwe futhi sibe uhlobo lwebhulokhi noma sibe nesibonisi sendawo: ibhulokhi. Ngokwesibonelo:
Ungabeka kanjani phakathi isithombe siqonde phezulu
Beka phakathi isithombe sime mpo ku-DIV kusho ukuqondisa isithombe phakathi nendawo yobude be-DIV. Kunezindlela ezimbalwa zokwenza, kodwa ezivame kakhulu yilezi ezilandelayo:
- Sebenzisa ukuqondisa okuqondile: indawo ephakathi. Lesi sici sisetshenziswa esakhiweni se-IMG futhi sibangela ukuthi isithombe siqondaniswe namaphakathi ngokuma ngokuphathelene nesisekelo sombhalo. Ukuze lokhu kusebenze, i-elementi ye-DIV kufanele ibe nobude obuchaziwe futhi i-elementi ye-IMG kufanele ibe uhlobo olusemgqeni noma ibe nesibonisi: isakhiwo esisemgqeni. Ngokwesibonelo:
- Sebenzisa indawo ye-margin-top kanye ne-margin-phansi. Lezi zici zisetshenziswa esakhiweni se-IMG futhi zenza isithombe sibe namamajini afanayo phezulu naphansi, okusimisa siqonde phezulu. Ukuze lokhu kusebenze, i-elementi ye-DIV kufanele ibe nobude obuchaziwe futhi i-elementi ye-IMG kufanele ibe nobude obuchaziwe futhi ibe uhlobo lwebhulokhi noma ibe nesibonisi: isakhiwo sebhulokhi. Ngokwesibonelo:
- Ukusebenzisa isakhiwo sokuguqula: translateY(). Kulokhu isetshenziswa ku-elementi ye-IMG futhi ibangela ukuthi isithombe sinyakaze sibheke phezulu ibanga elithile ukusuka endaweni yaso yasekuqaleni. Ukuze uyibeke phakathi iqonde phezulu, kufanele uyisuse phansi ngo-50% wobude bayo. Ukuze lokhu kusebenze, i-elementi ye-DIV kufanele ibe nobude obuchaziwe futhi i-elementi ye-IMG kufanele ibe nobude obuchaziwe futhi ibe uhlobo lwebhulokhi noma ibe nesibonisi: isakhiwo sebhulokhi. Ngokwesibonelo:
Ungamisa kanjani isithombe phakathi kwezimbazo zombili
Ukubeka isithombe phakathi nendawo kuzo zombili izimbazo ku-DIV kusho qondanisa isithombe phakathi nendawo yakho kokubili ububanzi nobude ye-DIV, lokhu kuyinkimbinkimbi kakhulu. Kunezindlela eziningana zokwenza lokhu, kodwa ezivame kakhulu yilezi ezilandelayo:
- Sebenzisa ukuqondisa kombhalo: isakhiwo esimaphakathi kanye nokuqondanisa mpo: indawo ephakathi. Lezi zici zisebenza ku-elementi ye-DIV kanye ne-elementi ye-IMG ngokulandelanayo, futhi ibangela ukuthi isithombe siqondaniswe namaphakathi kokubili ngokuvundlile nangokuqondile. Ukuze lokhu kusebenze, i-elementi ye-DIV kufanele ibe nobude obuchaziwe futhi i-elementi ye-IMG kufanele ibe uhlobo olusemgqeni noma ibe nesibonisi: isakhiwo esisemgqeni. Ngokwesibonelo:
- Sebenzisa imajini: impahla ezenzakalelayo. Lapha isetshenziswa entweni ye-IMG futhi yenza isithombe sibe namamajini afanayo kuzo zonke izinhlangothi ezine, esibeka phakathi kuzo zombili izimbazo. Ukuze lokhu kusebenze, i-elementi ye-DIV kufanele ibe nobude obuchaziwe futhi i-elementi ye-IMG kufanele ibe nobubanzi nobude obuchaziwe futhi ibe uhlobo lwebhulokhi noma ibe nesibonisi: isakhiwo sebhulokhi. Ngokwesibonelo:
- Sebenzisa isici sokuguqula: translate(). Kulokhu isetshenziswa entweni ye-IMG futhi ibangela ukuthi isithombe sihambe ibanga elithile ukusuka endaweni yaso yasekuqaleni kuzo zombili izimbazo. Ukuze uyibeke maphakathi, kufanele uyisuse ngo-50% wobubanzi bayo kwesokudla futhi u-50% wobude bayo uye phansi. Ukuze lokhu kusebenze, i-elementi ye-DIV kufanele ibe nobude obuchaziwe futhi i-elementi ye-IMG kufanele ibe nobubanzi nobude obuchaziwe futhi ibe uhlobo lwebhulokhi noma ibe nesibonisi: isakhiwo sebhulokhi. Ngokwesibonelo:
Beka phakathi noma yisiphi isithombe
Ukubeka isithombe phakathi nendawo ku-DIV kungaba usizo ukuthuthukisa ukubukeka nokuhleleka kwewebhusayithi yakho, kanye nokugqamisa isithombe ofuna ukusiveza. Ukumisa isithombe phakathi nendawo ku-DIV akunzima, kodwa kuya ngezinto ezimbalwa ezifana nohlobo lwesithombe, usayizi we-DIV, isitayela se-DIV, njll.
Kulesi sihloko Sichazile ukuthi ungamisa kanjani isithombe phakathi nendawo ku-DIV kusetshenziswa i-HTML ne-CSS, okuyizilimi zokuhlela ezisetshenziselwa ukwakha nokuklama amakhasi ewebhu. Sikubonise izindlela ezimbalwa nezibonelo ukuze ukwazi ukukhetha leyo ekufanele kakhulu.
Sithemba ukuthi usithandile lesi sihloko futhi ufunde ukuthi ungabeka kanjani isithombe phakathi nendawo ku-DIV. Uma unemibuzo noma iziphakamiso, sishiye amazwana. Ungakwazi futhi ukwabelana ngalesi sihloko nabangani bakho noma umndeni wakho othanda I-HTML noma i-CSS. Masingene emsebenzini sihlele!