HTML kods teksta aplīmēšanai

2019

Nepieciešams kods, lai aplīmētu tekstu ap attēlu? Parasti, veidojot HTML lapu, viss plūst lineāri, kas nozīmē vienu bloku tieši pēc otra. Visas manas iepriekšējās amata vietas ir piemērs, piemēram, teksts, attēls, tad teksts utt.

Dažreiz, iespējams, vēlēsities iekļaut tekstu blakus attēlam, nevis zemāk. To sauc par iesaiņojuma tekstu ap attēlu. Tas ir diezgan viegli ietin tekstu, izmantojot HTML. Ņemiet vērā, ka jums nav jāizmanto CSS, lai ietītu tekstu.

Tomēr šajās dienās W3C iesaka izmantot CSS, nevis HTML, lai veiktu šādus uzdevumus. Es minēšu abas turpmāk norādītās metodes, bet, ja iespējams, labāk izmantot CSS, jo tas ir labāk pielāgojams atsaucīgiem tīmekļa vietņu dizainiem.

Aptveriet tekstu ap attēlu, izmantojot HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing sagriešanas sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas nav imperdiet enim congue.

Lai teksta apvalks būtu labajā attēla pusē, jums ir jāsalīdzina attēls pa kreisi:

Jūsu teksts iet šeit.

Ja vēlaties, lai teksts tiktu parādīts pa kreisi, un attēls parādās labajā labajā pusē, vienkārši nomainiet izlīdzināšanas parametru uz “labi”.

Jūsu teksts iet šeit.

Tieši tā! Diezgan vienkārši? Vienīgais laiks, ko vēlaties izmantot CSS, ir, ja vēlaties attēlus pievienot margām, lai starp tekstu un attēlu būtu dažas vietas.

Attēlam var pievienot rezerves, izmantojot šādu CSS stila kodu:

Jūsu teksts iet šeit.

Iepriekš minētais kods izmanto MARGIN CSS elementu, lai attēla labajā pusē pievienotu 10 pikseļu atstarpi. Tā kā mēs esam saskaņojuši attēlu pa kreisi, mēs vēlamies pievienot atstarpi pa labi.

Būtībā šie četri numuri ir TOP RIGHT BOTTOM LEFT. Tātad, ja vēlaties pievienot balto atstarpi labās malas attēlam, jūs to izdarītu:

Jūsu teksts iet šeit.

Tāpēc, lai veiktu šo uzdevumu, ir diezgan vienkārši izmantot HTML, bet atkal, tas var nedarboties labi reaģējošām vietnēm.

Wrap Text Around Image, izmantojot CSS

Labāks veids, kā apvilkt tekstu ap attēlu, ir izmantot CSS. Tas dod jums vairāk smalku graudu kontroli pār elementu novietojumu un darbojas labāk ar mūsdienīgiem kodēšanas standartiem.

Lai gan CSS tieši iekļautu HTML attēla tagā, jums patiešām nekad vairs nevajadzētu to darīt. Tā vietā jums vajadzētu būt atsevišķam failam, ko sauc par stilu, kas satur visu jūsu CSS kodu.

IMG tagā jūs vienkārši piešķirat atzīmi atzīmei un piešķirat tam nosaukumu. Manā piemērā es nosaucu klasi pa kreisi . Manā stillapā viss, kas man jādara, ir pievienot šādu kodu:

 .left {float: pa kreisi; polsterējums: 0 10px 0 0;}

Kā redzat, kreisās malas attēla labajā pusē es pievienoju 10px polsterējumu. Es arī izmantoju peldošo īpašumu, lai pārvietotu attēlu no dokumenta parastās plūsmas un novietotu to vecāka konteinera kreisajā pusē.

Kā redzat, tas ir daudz tīrāks par visu šo kodu pievienošanu IMG tagam. Tas ir arī vieglāk pārvaldāms, un jūs varat izmantot daudz vairāk CSS rekvizītu, lai pielāgotu tīmekļa lapas izskatu. Ja jums ir kādi jautājumi, lūdzu, sniedziet komentārus. Izbaudi!