U ovom članku ćemo pogledati opcije za premotavanje teksta oko slike. Postoji nekoliko načina. Pogledajmo svaki od njih. Za početak, savjetujem vam da pročitate html tag članka imati osnovno znanje o slikama na html stranicama.

1. Omotavanje sa stilovima oznaka

Slika se može poravnati samo korišćenjem stilova CSS oznaka . Kao što znate, sintaksa oznake vam omogućava da postavite poravnanje slike u atributima:

gdje VALUE može uzeti vrijednosti

• lijevo - lijevo poravnanje
• desno - desno poravnanje
• dno - poravnanje na prvi red teksta (ovo je zadano)
• vrh - poravnanje prema gornjem redu teksta
• sredina - poravnanje sa osnovnom linijom teksta

Na primjer

Tekst teksta tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Čini se da se slika zalijepila s tekstom, pa ćemo napraviti neke uvlake. Štaviše, postoje dvije opcije kako se to može učiniti.

Opcija 1.1. Preko CSS svojstva - hspace i vspace
Da biste to učinili, u atributima oznake dodajte dvije vrijednosti:

Ovako će to izgledati na stranici:

Atribut hspace specificira horizontalni padding u pikselima, vspace – vertikalni padding, respektivno.

Opcija 1.2. Kroz CSS svojstvo - padding i margina
Da biste to učinili, u atributima oznake dodajte dvije vrijednosti:

Ovako će to izgledati na stranici:

Izgleda bolje zbog činjenice da nismo uvukli lijevo. Umjesto margine, možete koristiti padding, efekat će biti sličan.

Korištenje svojstva float umjesto align

Pored svojstva align u atributima oznake stilovi imaju svojstvo CSS float, koje je takođe odgovorno za poravnanje. Sintaksa je sljedeća:

float :desno; // Desno poravnanje float:left; // Lijevo poravnanje

Na primjer, ako napišete izlaz slike u prethodnom primjeru na sljedeći način:

Zatim se pretvara u sljedeće.

CSS float vam omogućava da kreirate HTML menije, postavite blokove, poravnate slike

Ako ne razumete dobro kako to funkcioniše umotavanje u HTML i CSS(svojstvo plutanja), onda će vam ova napomena pomoći u navigaciji. CSS svojstvo float se često koristi za pozicioniranje dva ili više okvira u jednom redu. Gornji dio ovih blokova je u istom nivou, donji dio zavisi od visine blokova. Sami blokovi "lebde" ulijevo ( float:levo) ili desno ( float: desno). Tu je i vrijednost none, ona onemogućuje premotavanje (operaciju float) za određeni element sa float: none

Svojstvo se također koristi prilikom poravnavanja slika.

Omotavanje teksta oko slike

Karakteristike umotavanja u CSS

“Sporedni” efekat se javlja ako je slika poravnata s bilo koje strane velika i nalazi se na dnu bloka u kojem je poravnata. U ovom slučaju, sljedeći blok elementi također mogu biti u interakciji.

Još jedna karakteristika je gubitak visine od strane nadređenog elementa. Kada je visina roditeljskog bloka određena sadržajem, a unutra postoje plutajući elementi, tada roditelj „zaboravlja“ visinu unutrašnjih (odlebdjeli su!). Rezultat je skupljena ivica roditeljskog HTML elementa

Razmotajte u HTML i CSS

Možete izbjeći probleme opisane iznad specificirajući blok element sa CSS svojstvom čistim iza plutajućih elemenata. Ovo svojstvo nadjačava efekte float-a na elemente koji slijede float. Ovo može biti div, ili drugi element ili pseudo-element sa vrijednošću clear:left (ostale vrijednosti su jasne: desno ili clear: oboje) ako želimo poništiti učinak elementa koji pluta lijevo.

Prelamanje se otkazuje korištenjem svojstva clear CSS.

Horizontalni meni

Koristeći premotavanje možete kreirati horizontalni meni. Da biste to uradili, potrebno je da se prijavite float:levo na elemente li. U ovom slučaju elementi zauzimaju horizontalni položaj, ostaje samo umetnuti veze. Ovo nije jedini način; sličan meni se može kreirati i kroz nekoliko hiperveza za redom, koristeći svojstvo display:inline-block ili display:table i drugi.

Da biste saznali više o plutanju u CSS-u, pogledajte stranicu dokumentacije za CSS-float. Ista stranica detaljno opisuje model CSS kutije.

Otkazivanje protoka bloka (float) je najčešća operacija pri postavljanju HTML stranica. Pogledat ćemo sve poznate načine za nadjačavanje efekta CSS svojstva float.

Prije nego što zaronimo u tehnike čišćenja tokova, pogledajmo problem koji pokušavamo riješiti.

Tipičan slučaj HTML izgleda

Blokovi .el-1 I .el-2 postavljeni jedan pored drugog unutar kontejnera .container, i jedan element .main slijedi nakon .container:

Želimo visinu kontejnera .container bila jednaka visini najdužeg od svoje djece (tj .el-1, ili .el-2) i tako da blok .main biti nakon bloka .container.

A evo šta vidimo: .container(crni okvir) srušio se kao da u njemu nema ničega, blok .main(blok sa crvenom pozadinom) nalazi se ispod bloka .container, kako smo hteli, ali se istovremeno krije iza blokova .el-1(sa žutom pozadinom) i .el-2(sa ružičastom pozadinom). Bog zna šta! Da moj šef vidi ovo, sigurno bi mi rekao, "Koristi, Šurik, raspored stola". Srećom, vremena kada su web stranice bile raspoređene u tabele su davno prošla i možemo se dobro snaći i bez njih. Ne veruješ mi? Čitaj dalje.

Uprkos činjenici da mnogi ovo smatraju greškom pretraživača, ovo je samo princip po kojem funkcionišu plutajući elementi. Stoga, moramo prisiliti roditeljski element da se proširi kako bi u potpunosti prihvatio podređene elemente. Zatim će se ispod kontejnera nalaziti sljedeći elementi.

Metoda 1: Metoda stare škole

Kao što znate, CSS svojstvo jasno postavlja na kojoj strani elementa je zabranjeno da drugi elementi teče oko njega, stoga ovo svojstvo može spriječiti elemente da se preklapaju iznad onih koji lebde. Ideja je sledeća: ubacite prazan element koji ima svojstvo clear ispod plutajućih blokova. Dugogodišnja je tradicija da se za ovakav element koristi posebna klasa, tako da je možete koristiti u svom HTML-u. Evo klasičnog CSS koda:

Jasno (jasno: oba; )

Što je primjenjivo na naš HTML izgled:

Naš demo primjer implementiran pomoću ove metode:

Ako vam nije stalo do kontejnera koji se urušava, samo izgubljeni blok .main, tada možete postaviti i element "protoka čišćenja" nakon posude. Ali, ako odlučite da to učinite, tada će biti mnogo lakše jednostavno dodati svojstvo clear samom elementu .main.

Ovo je jednostavna i jasna metoda. Međutim, moderne prakse izgleda imaju tendenciju da odvoje sadržaj od stila, pa je najbolje da ga ne koristite.

Metoda 2: svojstvo prelivanja

Korištenje imovine overflow u oznaci .container, možemo prisiliti da se kontejner proširi do visine postavljenih elemenata. Naš CSS će izgledati ovako:

Kontejner ( prelijevanje: skriveno; /* ili "auto" */ )

Naš HTML će ostati isti kao što je bio izvorno, bez dodatnih elemenata. Ovo je ono što dobijamo kao rezultat:

Nažalost, ova metoda ima nedostatak: svaki podređeni element koji se proteže izvan kontejnera će biti ili isječen (u slučaju prelivanja: skriven;) ili će uzrokovati pojavljivanje traka za pomicanje (u slučaju prelivanja: auto;).

Metoda 3: “clearfix” klasa

Mi kreiramo klasu .clearfix sa pseudo elementima ::prije I ::posle i dajte im prikaz: table , koji kreira anonimnu ćeliju tabele. Ova klasa će se koristiti za brisanje plutajućih elemenata. CSS kod izgleda ovako:

Clearfix:pre, .clearfix:after (sadržaj: ""; prikaz: tabela; ) .clearfix:after (očisti: oba; ) .clearfix (zum: 1; /* tj. 6/7 */)

Promenimo malo HTML kod dodavanjem u klasu kontejner Klasa clearfix:

Evo rezultata naše nove klase:

Ako vam nije potrebna podrška za pretraživače ispod IE8, onda će naš kod biti značajno smanjen:

Clearfix:after (sadržaj: ""; prikaz: tabela; brisanje: oba; )

Metoda 4: sadrži-floats vrijednost za min-visinu

Kontejner (min-visina: contain-floats; )

Ovaj kod daje skoro isti efekat kao clearfix ili overflow, ali sa jednom linijom koda i, osim toga, nema nedostataka o kojima smo ranije govorili. Nažalost, još nijedan pretraživač ne podržava ovo svojstvo, pa ga imajte na umu.

Dakle, imate gomilu različitih "clearfix" metoda. Primjena klase .clearfix je postao standard i toplo preporučujem da ga koristite u odnosu na prethodne dvije metode.

Upotreba slika na html stranici je uvijek informativnija i vizualnija u odnosu na čvrsti tekst.

Sliku je moguće umetnuti u html tekst na nekoliko načina, a u klasicima ovih metoda postoje 3:

• centriranje slike
• premotavanje teksta oko slike
• postavljanje slike u polje

Poravnavanje slike prema sredini

Da biste poravnali sliku sa središtem tekstualne kolone, najlakši način je da koristite oznaku stavite u kontejner

Za koje je postavljen atribut align="center". Ako očekujete da ćete često koristiti slike, onda bi bilo najbolje koristiti CSS stil za oznaku

Kako se to implementira, pogledajte primjer 1.

Primjer 1: Poravnavanje slike prema sredini

U ovom primjeru, na kontejner

Dodamo CSS klasu cimg, koja postavlja poravnanje na centar linije. Kako će to shematski izgledati prikazano je na slici 1.

Rice. 1. Crtež u sredini kolone teksta

Premotavanje teksta oko slike

Premotavanje teksta oko slike jedna je od najčešćih metoda HTML izgleda stranice, koja vam omogućava da efikasno koristite sav raspoloživi prostor. popularne tehnike za raspored web stranica, kada se slika nalazi duž ivice prozora pretraživača, a tekst ide oko nje sa druge strane (slika 2). Da biste prilagodili premotavanje teksta oko slike, možete koristiti nekoliko metoda zasnovanih na HTML-u i CSS-u.

Rice. 2. Slika je poravnata sa lijevom ivicom stranice i okružena tekstom na desnoj strani.

Da biste omotali tekst oko slike koristeći HTML, morate zapamtiti da je oznaka Postoji atribut align, koji određuje poravnanje slike u dokumentu i istovremeno određuje kako će se tekst omotati oko slike. Da biste poravnali sliku udesno i podesili da se tekst premota ulijevo, potrebno je koristiti align="right", da poravnate lijevo i premotate tekst udesno koristite align="left". Ovdje je također korisno koristiti atribute oznaka - vspace i hspace, koji označavaju na kojoj udaljenosti će tekst teći oko slike okomito i horizontalno. Bez navođenja ovih atributa, tekst će biti usko uz sliku (primjer 2).

Primjer 2: Premotajte tekst oko slike koristeći HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Da bismo konfigurisali premotavanje slika pomoću CSS stilova, koristićemo pravilo float. float:right poravnava sliku sa desnom ivicom dokumenta i prelama tekst ulevo, dok float:left poravnava sliku sa levom ivicom dokumenta i prelama tekst udesno od slike (primer 3).

Primjer 3: Premotajte tekst oko slike koristeći CSS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ovdje da označite dodaje se klasa cimg, koja ima desno poravnanje postavljeno na float:right, a lijevo i donje omotavanje slike je postavljeno svojstvima padding-left:10px i padding-bottom:10px.

Slika na terenu

Sa ovim formatom za postavljanje slike u dokument, slika teče oko samo jedne strane. Ova metoda postavljanja liči na strukturu od dvije kolone, gdje je slika smještena u jednu kolonu, a tekst u drugu.

Kod ove šeme, slika se nalazi desno ili lijevo od teksta i teče samo s jedne strane. U stvari, podsjeća na dvije kolone, od kojih jedna sadrži crtež, a druga tekst (slika 3).

Rice. 3. Postavite sliku u polje lijevo od teksta

Znam dva načina za kreiranje slične strukture - korištenjem HTML oznaka

Tabele: ova metoda je zgodna jer vam omogućava da lako i jasno organizirate stupastu strukturu pomoću ćelija. Ova metoda je stara škola i njena upotreba nije posebno dobrodošla u modernom web dizajnu. Smatra se da je ova metoda suvišna i da je teško uređivati. Ali svi pridošlice prolaze kroz to. Za takvu strukturu trebat će nam tablica s tri stupca, prva kolona će sadržavati samu sliku, treća će sadržavati tekst, a između njih ćemo naznačiti uvlačenje - u drugom stupcu. Možete proći sa dvije kolone i odrediti uvlačenje koristeći CSS stilove ili koristeći atribut širine oznake (primjer 4).

Primjer 4: Postavljanje slike na polje pomoću tabela

Ježevi su od spoljne agresije zaštićeni bodljikavom ljuskom koja ih spašava od onih koji žele profitirati od ukusnog i nježnog ježevog mesa. Ali ovu životinju ne treba smatrati potpuno bezopasnom; na kraju krajeva, ona je grabežljivac. Da, on se ne hrani vukovima i lisicama, ali samo zato što je inferiorniji od njih po veličini. Ali on je sasvim sposoban da pojede crva ili čak zmiju.

rezultat je prikazan na slici 4.

Rice. 4. Slika u polju lijevo od teksta

U primjeru 4, širina slike je 90 piksela, a širina kolone u kojoj se nalazi 110 piksela. Razlika između njih pruža nam potrebno uvlačenje od teksta do slike. Kako biste spriječili da atributi tablice razmak između ćelija i cellpadding ometaju proces, bolje je vratiti njihove vrijednosti na nulu. Imajte na umu da je visinsko poravnanje ćelija vertikalno-poravnanje: vrh.

CSS stilovi: Ovaj primjer je poželjniji i optimalniji. Ovdje su nam potrebna dva sloja

, čije ćemo parametre specificirati putem CSS-a. Jedan sloj će sadržavati sliku, a drugi će sadržavati tekst. Kako to funkcionira, pogledajte primjer 5:

Primjer 5. Postavljanje slike na polje sa slojevima i CSS stilovima

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<kod > <html > <glava > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <naslov > Crtanje na terenu</naslov> <style type = "text/css" > </style> </head> <tijelo > <div id = "slika" > <img src = "images/igels.png" širina = "90" visina = "78" alt = "Nećete vjerovati, ali to je jež"> </div> <div id = "tekst" > Ježevi su od spoljne agresije zaštićeni bodljikavom ljuskom koja ih spašava od onih koji žele profitirati od ukusnog i nježnog ježevog mesa. Ali ovu životinju ne treba smatrati potpuno bezopasnom; na kraju krajeva, ona je grabežljivac. Da, on se ne hrani vukovima i lisicama, ali samo zato što je inferiorniji od njih po veličini. Ali on je sasvim sposoban da pojede crva ili čak zmiju.</div> </tijelo> </html>

Ježevi su od spoljne agresije zaštićeni bodljikavom ljuskom koja ih spašava od onih koji žele profitirati od ukusnog i nježnog ježevog mesa. Ali ovu životinju ne treba smatrati potpuno bezopasnom; na kraju krajeva, ona je grabežljivac. Da, on se ne hrani vukovima i lisicama, ali samo zato što je inferiorniji od njih po veličini. Ali on je sasvim sposoban da pojede crva ili čak zmiju.

Svojstvo float:left za sloj #pic je potrebno da bi se slika postavila uz lijevu ivicu dokumenta, a gornji red teksta da se poklapa sa gornjim redom slike. Bez ovog svojstva, sloj #text se spušta do visine slike. Također, za sloj #text, odredite lijevu marginu margin-left:110px na udaljenosti od 110 piksela, tako da se tamo tekst ne preklapa sa slikom. Ako sliku treba postaviti na desnu marginu, navedite float:right za #pic i margin-right:110px za #text.

P.S.: Prema HTML4 specifikaciji, slike moraju biti smještene unutar blok elemenata kao što su div ili p.

Koristeći svojstvo float, možete poravnati sliku lijevo (img (float: lijevo; margina: 0 [x] [y] 0;)) ili desno (img (float: desno; margina: 0 0 [x] [y] ; )) rub web stranice ili bloka kontejnera.

Kako bi se spriječilo spajanje slike s tekstom, dodaju joj se odgovarajuće vrijednosti za svojstvo margine.

Možete razmotati sljedeći blok teksta ili naslov koristeći h2, p (clear: left;) ili h2, p (clear: right;) konstrukciju.

Takođe možete postaviti sliku u centar img stranice (prikaz: blok; margina: 0 auto;) ili napraviti premotavanje teksta oko slike sa obe strane, premotavajući svaki blok teksta u poseban pasus.

HTML markup

Spisak gradova u Engleskoj

Amersham

Amersham je ....jpg">Buxton je ...

Chesterfield

Chesterfield je ....jpg">

Ima ....jpg">Dartmouth je ...

CSS stilovi

Tijelo ( margina: 0; pozadina: #FFF8E8; padding: 0 20px; veličina fonta: 90%; poništavanje brojača: h2; /*kreiraj brojač za bilo koji naslov h2*/ ) h1 (familija fonta: "Lora" , serif; boja: #564C4A; font-weight: 300; ) h2 (familija fontova: "Lora", serif; boja: #B00D22; font-weight: 300; jasno: oba; /* poništiti omotavanje na obje strane */ padding: 1em 0 0.25em; border-bottom: 2px solid; counter-increment: h2; /* postaviti numeraciju h2 naslova da se poveća za jedan */ ) h2:before ( sadržaj: " " counter(h2) " . "; /* dodajte na početak svakog zaglavlja trenutnu vrijednost brojača i tačku s razmakom */ ) p ( porodica fontova: arial; boja: #785F5B; visina reda: 1.3; ) /**** ****** slika lijevo ** ********/ .lijevo ( float: lijevo; margina: 0 1em 1em 0; ) /********** slika na desno **********/ .desno ( float: desno; margina: 0 0 1em 1em; ) /********** slika između teksta ********** / .columns ( float: lijevo; maksimalna širina: 30 %; margina: 0; ) .img-center ( float: lijevo; margina: 0 1,5% 0 1,5%; maksimalna širina: 37%; ) /********* slika u centru********* */ .centar (prikaz: blok; margina: 0 auto 1,5%; )

Omotajte sliku sa obe strane

Tehnika je da se tekst postavlja u dva bloka iste širine sa malim razmakom u sredini. Koristeći pseudoelemente:before i:before, svakom bloku se dodaje čuvar mjesta širine polovine slike i visine jednake visini slike. Slika je apsolutno pozicionirana na takav način da pokriva ove prazne blokove, što rezultira efektom omotača na obje strane.

HTML markup

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus