Jinsi ya Kupanda picha kwenye kushoto ya Nakala kwenye ukurasa wa wavuti

Kutumia CSS ili kuunganisha picha kwenye upande wa kushoto wa Mpangilio wa ukurasa wa wavuti

Angalia karibu na ukurasa wowote wa wavuti leo na utaona mchanganyiko wa maandishi na picha zinazofanya wingi wa kurasa hizo. Ni rahisi sana kuongeza maandishi na picha kwenye ukurasa . Nakala hii imechukuliwa kwa kutumia vitambulisho vya kawaida vya HTML kama aya, orodha, na vichwa, wakati picha zimejumuishwa kutumia kipengele .

Uwezo wa kufanya maandishi hayo na picha hizo hufanya vizuri pamoja ni nini kinachoweka wabunifu wavuti mbali! Hutaki tu maandishi yako na picha kuonekana moja baada ya nyingine, ni jinsi vipengele vya ngazi ya kuzuia utakavyopangwa kwa default. La, unataka udhibiti juu ya jinsi maandiko na picha vinavyotembea pamoja katika nini hatimaye kuwa muundo wa visu ya tovuti yako.

Kuwa na picha ambayo inaendana na upande wa kushoto wa ukurasa wakati maandishi ya ukurasa huo inapita karibu na hayo ni matibabu ya kawaida ya kubuni kwa kuchapishwa kuchapishwa na pia kwa kurasa za wavuti. Katika maneno ya wavuti, athari hii inajulikana kama picha inayozunguka . Mtindo huu unafanikiwa na mali ya CSS ya "kuelea". Mali hii inaruhusu maandishi kuzunguka picha ya kushoto iliyokaa na upande wake wa kulia. (Au karibu na picha iliyokaa sawa na upande wake wa kushoto.) Hebu tuangalie jinsi ya kufikia athari hii ya Visual.

Anza Kwa HTML

Jambo la kwanza unahitaji kufanya nio HTML ya kufanya kazi nayo. Kwa mfano wetu, tutaandika kifungu cha maandishi na kuongeza picha katika mwanzo wa aya (kabla ya maandishi, lakini baada ya kufungua

tag). Hapa ni nini markup HTML inaonekana kama:

Nakala ya aya inakuja hapa. Katika mfano huu, tuna picha ya picha ya vichwa, hivyo maandishi haya yatakuwa juu ya mtu ambaye vichwa vya habari ni.

Kwa default, ukurasa wetu wa wavuti utaonyeshwa na picha hapo juu ya maandiko. Hii ni kwa sababu picha ni mambo ya kuzuia kiwango cha HTML. Hii ina maana kwamba kivinjari huonyesha mapumziko ya mstari kabla na baada ya kipengele cha picha kwa default. Tutabadilisha kuangalia hii ya default kwa kugeuka kwa CSS. Kwanza, hata hivyo, tutaongeza thamani ya darasa kwenye kipengele cha picha yetu . Darasa hilo litafanya kama "ndoano" ambayo tutatumia CSS yetu baadaye.

Nakala ya aya inakuja hapa. Katika mfano huu, tuna picha ya picha ya vichwa, hivyo maandishi haya yatakuwa juu ya mtu ambaye vichwa vya habari ni.

Kumbuka kwamba darasa hili la "kushoto" halifai kitu peke yake! Kwa sisi kufikia mtindo wetu unayotaka, tunahitaji kutumia CSS ijayo.

CSS Mitindo

Kwa HTML yetu mahali, ikiwa ni pamoja na sifa yetu ya darasa ya "kushoto", tunaweza sasa kugeuka kwenye CSS. Tungeongeza utawala kwenye stylesheet yetu ambayo ingeweza kuelea picha hiyo na pia kuongeza kipengezi kidogo karibu nayo ili maandiko ambayo hatimaye kuifunga kuzunguka picha haipatikani kwa karibu sana. Hapa ni CSS unaweza kuandika:

.left {kuelea: kushoto; padding: 0 20px 20px 0; }

Mtindo huu unakuja picha hiyo kwa upande wa kushoto na huongeza pedi ndogo (kutumia baadhi ya CSS shorthand) kwa haki na chini ya picha.

Ukiangalia ukurasa ulio na HTML hii kwenye kivinjari, picha hiyo ingekuwa imeunganishwa kwa upande wa kushoto na maandishi ya aya yanaonekana kuwa sawa na kiwango cha kutosha cha nafasi kati ya mbili. Kumbuka thamani ya darasa ya "kushoto" ambayo tulitumia ni ya kiholela. Tungeweza kuiita chochote kwa sababu neno "kushoto" halifanye kitu peke yake. Hii inahitaji kuwa na sifa ya darasa katika HTML ambayo inafanya kazi na mtindo halisi wa CSS unaoelezea mabadiliko ya kuona unayotaka kufanya.

Njia mbadala za kufikia mitindo hii

Njia hii ya kutoa kipengele cha picha ya sifa ya darasa na kisha kutumia mtindo wa CSS wa jumla unaozunguka kipengele ni njia moja tu unaweza kukamilisha kuangalia "kuangalia picha ya kushoto". Unaweza pia kuchukua thamani ya darasa mbali na picha na mtindo kwa CSS kwa kuandika mchezaji maalum zaidi. Kwa mfano, hebu tuangalie mfano ambapo picha hiyo ni ndani ya mgawanyiko na thamani ya darasa ya "maudhui kuu".