Me pehea te rere i tetahi Image ki te taha Mauī o te Kuputuhi i te Paetukutuku

Te whakamahi CSS ki te whakawhiti i tetahi ahua ki te taha maui o te Tahora Hononga Paetukutuku

Titiro ki tetahi whārangi tukutuku i tenei ra, ka kite koe i te huinga o te kuputuhi me nga whakaahua e hanga ana i te nuinga o aua whārangi. He mea tinowari ki te whakauru kuputuhi me nga whakaahua ki tetahi whārangi . Ko te kuputuhi kei te whakamaheretia ma te whakamahi i nga tūtohu HTML paerewa, ano he paraka, he mahinga, he pane, ka whakaurua nga whakaahua ki te whakamahi i te element .

Ko te kaha ki te mahi tahi i taua kuputuhi me aua whakapakoko e pai ana te mahi tahi me te wehe i nga kaihoahoa tukutuku nui! Kaore koe e hiahia ana kia puta mai to kuputuhi me nga whakaahua i tetahi i muri i tetahi atu, ko te pehea e tautuhi ai i enei huinga taumata-paraka . Engari, e hiahia ana koe ki te whakahaere i te kaha o te kuputuhi me nga whakaahua i roto i te aha ka waiho hei hoahoa ataata o to paetukutuku.

He ahua e hono ana ki te taha maui o te whārangi, ka rere te kuputuhi o taua whaarangi ko te maimoatanga hoahoa noa mo te hoahoa hoahoa me nga wharangi tukutuku hoki. I roto i nga kupu tukutuku, e mohiotia ana tenei paanga ko te rere o te ahua . Kua tutuki tenei ahua ki te taonga CSS mo te "rererangi". Ka taea e tenei mahinga te rere o te kuputuhi ki te taha taha maui-ki tona taha matau. (I te taha ranei o tetahi ahua tika ki te taha maui.) Kia titiro tatou ki te whakatutuki i tenei painga ataata.

Tīmata Ma HTML

Ko te mea tuatahi ka hiahia koe ki te mahi, me whai HTML ki te mahi. Hei tauira, ka tuhia e matou he pararangi o te kuputuhi me te tapiri i tetahi ahua i te timatanga o te paraka (i mua i te tuhinga, engari i muri i te whakatuwheratanga

tag). Anei te ahua o taua tohu HTML:

Ka haere te tuhinga o te paraka ki konei. I roto i tenei tauira, he ahua ano o ta maatau whakaahua, na ko tenei kuputuhi pea e pa ana ki te tangata e puta ana te upoko.

Ma te taunoa, ka whakaatuhia to maatau paetukutuku ki te ahua i runga i te kuputuhi. Ko te mea na te mea ko nga ahuatanga papa-taumata i te HTML. Ko te tikanga tenei ka wehe te raupapa i te raina i mua me te muri o te huānga o te whakapakoko ma te taunoa. Ka hurihia tenei tirohanga taunoa ma te tahuri ki CSS. Tuatahi, engari, ka tapiritia e tatou he uara a te akomanga ki to taatau ahua . Ka mahi tenei akomanga hei "matau" ka whakamahi i ta tatou CSS i muri mai.

Ka haere te tuhinga o te paraka ki konei. I roto i tenei tauira, he ahua ano o ta maatau whakaahua, na ko tenei kuputuhi pea e pa ana ki te tangata e puta ana te upoko.

Kia mahara ko tenei akomanga o "maui" kaore e mahi i tetahi mea! Mo te whakatutuki i to tahua e hiahiatia ana, me whakamahi maatau CSS .

CSS Styles

Ma to tatou HTML i te waahi, tae atu ki to taatau akomanga o "maui", ka taea e tatou te tahuri ki CSS. Ka tapiritia e matou he ture ki o taatau waahanga e rere ana i taua whakapakoko, me te tapiri ano hoki i etahi papanga iti i muri mai kia kore ai te korero e piri ana ki te ahua o te ahua kaore e tino pa ana ki a ia. Tenei ko te CSS ka tuhia e koe:

.Whakaarehia: rererangi; te papaha: 0 20px 20px 0; }

Ka huri tenei ahua i tera ahua ki te taha maui, ka tapiritia he iti o te tarai (ma te whakamahi i etahi CSS poto) ki te taha matau me te raro o te ahua.

Mena kua arotakengia e koe te wharangi kei roto nei i tenei HTML i roto i te rorohiko, ka hono te ahua ki te maui, ka puta te tuhinga o te paraka ki tona tika me te nui o te mokowhiti i waenga i nga waahanga e rua. Kia mahara ko te uara o te akomanga o te "maui" e whakamahia ana e taatau. I taea e tatou te karanga i tetahi mea no te mea ko te kupu "mahue" kaore i te mea i tana ake. Me whai tohu tenei waahanga i roto i te HTML e mahi ana me te ahua CSS tūturu e whakaatu ana i nga huringa ataata e titiro ana koe ki te hanga.

Ko etahi atu huarahi hei whakatutuki i enei Pakihi

Koinei te huarahi o te tuku i te huanga ahua o te kohinga o te akomanga, me te whakamahi i te momo CSS whānui e rere ana i te huānga ko te huarahi anake e taea ai e koe te whakatutuki i tenei "ahua whakapae maui" titiro. Ka taea ano e koe te tango i te uara o te akomanga o waho o te ahua me te tahua ki a CSS na roto i te tuhi i tetahi kaiwhiwhi motuhake. Hei tauira, me titiro ki tetahi tauira kei hea te ahua o te waahanga o te wehenga me te uara a te akomanga o te "ihirangi matua".

Kei konei te tuhinga o te paraka. I roto i tenei tauira, he ahua ano o ta maatau whakaahua, na ko tenei kuputuhi pea e pa ana ki te tangata e puta ana te upoko. Hei tahua i tenei whakapakoko, ka taea e koe te tuhituhi i tenei CSS:

.ma-ihirangi img [float: maui; te papaha: 0 20px 20px 0; }

I tenei wahanga, ka tautuhia to maatau ki te taha maui, me te kuputuhi e huri ana ki a ratau i mua, engari kaore i hiahiatia e raatau te utu nui atu ki to maatau tohu. Ma te mahi i tenei mahinga ka taea te hanga i tetahi kōnae HTML iti ake, kawari ake te whakahaere, ka taea hoki te whakapai ake i te mahi.

Hei whakamutunga, ka taea e koe te taapiri tonu i nga momo ki to tohu HTML, penei:

Kei konei te tuhinga o te paraka. I roto i tenei tauira, he ahua ano o ta maatau whakaahua, na ko tenei kuputuhi pea e pa ana ki te tangata e puta ana te upoko.

Ko te tikanga tenei ko te " momo tahua ". Kaore e pai ana ma te whakakotahi i te ahua o te huānga me tona hanganga hanganga. Ko nga tikanga pai o te paetukutuku e whakatau ana kia noho motuhake te ahua me te hanganga o te whārangi. He mea tino pai tenei ma te waa e hiahia ana ki te whakarereke i to tahora, me te rapu i nga waahanga me nga taputapu rereke me te paetukutuku whakautu. Ko te ahua o te whārangi e hono ana i te HTML ka nui atu te uaua ki nga uiuinga korero a te kaituhi ka whakatika i to ahua o to pae kia hiahiatia mo aua mata rereke.

He tuhinga taketake na Jennifer Krynin. I whakatikahia e Jeremy Girard i te 4/3/17.