Posljednje ažuriranje: 21.04.2016
Obično se svi blokovi i elementi na web stranici pojavljuju u pretraživaču redoslijedom kojim su definirani u html kodu. Međutim, CSS pruža posebno float svojstvo koje nam omogućava da postavimo tok oko elemenata, tako da možemo kreirati zanimljivije i raznovrsnije web stranice u našem dizajnu.
Ovo svojstvo može imati jednu od sljedećih vrijednosti:
lijevo: element lebdi ulijevo, a svaki sadržaj koji ide ispod njega teče oko desne ivice elementa
desno: element se pomiče udesno
ništa: poništava premotavanje i vraća objekt u normalan položaj
Kada primjenjujete svojstvo float na stilizirane elemente osim img elementa, preporučuje se da postavite svojstvo širine.
Dakle, zamislimo da trebamo prikazati sliku lijevo od glavnog teksta na stranici, s desne strane treba biti bočna traka, a ostatak prostora treba zauzeti glavnim tekstom članka. Hajde da prvo definišemo interfejs stranice bez svojstva float:
Stari hrast, sav preobražen, raširen u šatoru raskošnog, tamnog zelenila, otopljen, lagano se njišeći na zracima večernjeg sunca...
"Ne, život nije gotov u 31. godini", iznenada je konačno, bez izuzetka, odlučio princ Andrew...
U ovom slučaju, dobićemo sekvencijalni raspored elemenata na stranici:
Sada ćemo na istoj stranici primijeniti svojstvo float, mijenjajući stilove na sljedeći način:
Slika (float: lijevo; / * float nalijevo * / margina: 10px; margin-top: 0px;) .bočna traka (obrub: 2px čvrsta #ccc; boja pozadine: #eee; širina: 150px; padding: 10px; margina- lijevo: 10px; veličina fonta: 20px; float: desno; / * premotajte udesno * /)
Shodno tome će se promijeniti i položaj elemenata na stranici:
Elementi na koje se primjenjuje svojstvo float nazivaju se i plutajući elementi ili plutajući elementi.
Zabranjeno umatanje. Clear property
Ponekad postaje neophodno onemogućiti omatanje. Sličan zadatak može biti relevantan ako blok treba premotati na novu liniju, a ne teći oko plutajućeg elementa. Na primjer, podnožje u pravilu treba biti striktno na dnu i protezati se cijelom širinom stranice. Ako postoji plutajući element ispred podnožja, onda se podnožje može omotati oko tog elementa, što nije poželjno.
Da bi se spriječilo prelamanje u CSS-u, svojstvo clear se koristi za instrukciju pretraživača da ne primjenjuje prelamanje na stilizirani element.
Svojstvo clear može imati sljedeće vrijednosti:
lijevo: Stilizirani element može se omotati oko lebdećeg elementa s desne strane. Na lijevoj strani, omotavanje ne radi.
desno: Stilizovani element može samo da se omota oko lebdećeg elementa sa leve strane. A omot sa desne strane ne radi.
oboje: stilizirani element može se omotati oko plutajućih elemenata i pomicati prema dolje u odnosu na njih
none: stilizirani element se ponaša na standardan način, tj. učestvuje u toku desno i lijevo
Na primjer, recimo da je podnožje definirano na web stranici:
Prisustvo omota će stvoriti netačan prikaz, u kojem se podnožje pomjera prema gore:
Promijenimo stil podnožja:
Podnožje (bord-top: 1px solid #ccc; clear: oboje;)
Sada se podnožje neće omotati oko slike, već će se spustiti.
U ovom članku ćemo analizirati opcije kako napraviti premotavanje teksta oko slike. Ukupno postoji nekoliko načina. Razmotrimo svaki od njih. Prvo, 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 (ova vrijednost je zadana)
- vrh - poravnava s gornjim redom teksta
- sredina - poravnanje sa osnovnom linijom teksta
Na primjer
Tekst teksta tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
Čini se da je slika zalijepljena za tekst, pa napravimo 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 postavlja horizontalno uvlačenje u pikselima, vspace - vertikalno u skladu s tim
Opcija 1.2. Preko CSS svojstva - 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. Možete koristiti padding umjesto margine, efekat će biti isti.
Korištenje svojstva float umjesto align
Osim svojstva align u atributima oznake stilovi imaju CSS float svojstvo koje je takođe odgovorno za poravnanje. Sintaksa je sljedeća:
float: desno; // Desno poravnanje float: lijevo; // Lijevo poravnanje
Na primjer, ako u prethodnom primjeru napišete izlaz slike na sljedeći način:
Zatim se to prevodi u sljedeće.
Vlad Merzhevich
Plutajući elementi će se zvati oni elementi koji su omotani oko konture drugim objektima web stranice, na primjer, tekstom. Ispravnije je reći "pokrenuti elementi", ali s druge strane, termin "plutajući element" je odavno ukorijenjen, pa ću ga koristiti u budućnosti.
Plutajući elementi se prilično aktivno koriste u izgledu web stranica i služe za implementaciju ovih, a ne samo zadataka:
- umotavanje slika u tekst;
- kreiranje bočnih traka;
- horizontalni meniji;
- kolone.
Prelamanje se vrši pomoću svojstva float stila postavljenog na lijevo ili desno. Prema zadanim postavkama, za elemente nije postavljeno prelamanje, ali ako iz nekog razloga to trebate eksplicitno navesti, trebali biste koristiti vrijednost none. Na sl. 3.32 prikazuje rezultat primjene različitih vrijednosti na sliku pored teksta.
Rice. 3.32. Premotajte tekst oko slike
Sam HTML kod ostaje suštinski nepromijenjen i prikazan je u primjeru 3.21.
Primjer 3.21. Korištenje plovaka
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.Ovaj primjer pokazuje dodavanje float svojstva sa lijevom vrijednošću u oznaku ... Ova vrijednost poravnava element lijevo od njegovog roditelja ili drugog plutajućeg elementa, a svi ostali elementi, poput teksta, teku udesno. Obrnuto, desno poravna element desno od nadređenog ili drugog plutajućeg elementa, a svi ostali elementi, poput teksta, teku lijevo.
Dakle, shvatili smo terminologiju. Proširimo primjer 3.21 kako bi se slika bolje stopila s tekstom. Najvažnije je postaviti uvlačenje desno od slike i, za svaki slučaj, odozdo. Da biste to učinili, idite na oznaku dodaje se klasa pod nazivom fig, koja ima postavljeno svojstvo margine, istovremeno određuje sopstvenu marginu na svakoj strani slike (primjer 3.22).
Primjer 3.22. Zamotajte sliku
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Winnie the Pooh uvijek nije bio nesklon malo osvježenja, posebno u jedanaest sati ujutro, jer je u to vrijeme doručak već odavno završio, a večera još nije mislila da počne. I, naravno, bio je užasno oduševljen kada je vidio Zeca kako vadi šolje i tanjire.
Rezultat primjera prikazan je na sl. 3.33.
Rice. 3.33. Lijevo poravnato i desno premotavanje crteža
Kreirajte bočne trake
Umetak je blok sa slikama i tekstom koji je ugrađen u glavni tekst. Okvir se obično nalazi na lijevoj ili desnoj ivici tekstualnog bloka, a glavni tekst teče oko njega s drugih strana (slika 3.34).
Rice. 3.34. Vrsta umetka
Da bi se okvir istakao u tekstu, obično ima boju pozadine i obrub. Okviri svojim izgledom liče na gornji način premotavanja teksta oko slike, tako da je kod za kreiranje okvira gotovo identičan prethodnom (primjer 3.23).
Primjer 3.23. Dodavanje okvira
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
- Magic Erase alat.
Radi slično kao i alat Magic Wand, ali za razliku od njega, ne bira područje, već ga briše.
Alat Magic Erase (Magic eraser) briše piksele slične boje. Ako radimo sa pozadinskim slojem ili sa slojem koji nema neprozirnost, pikseli će biti zamijenjeni bojom pozadine. U svim ostalim slučajevima dobićemo transparentno područje.
Princip rada sa alatom Magic Erase sličan je radu sa alatom Magic Wand. Naime, prvo postavljamo odgovarajuću vrijednost Tolerancije, omogućavamo Anti-aliased checkbox da napravi glatke ivice, poništavamo parametar Contiguous da uklonimo cijelu pozadinu odjednom, a zatim kliknemo na fotografiju u području neba. Ako je sloj pozadine prethodno preimenovan, dobićemo transparentne oblasti na pravim mestima.
Kada kreirate okvire, obavezno navedite njegovu širinu pomoću svojstva širine. Inače će veličina sloja biti mnogo šira nego što je potrebno.
Slojevi horizontalno
Po defaultu, blok elementi su poređani okomito, jedan ispod drugog, ali koristeći svojstvo float, možete učiniti da se pojavljuju jedan pored drugog horizontalno. U tom slučaju morate postaviti širinu slojeva i postaviti ih da lebde. Ako širina nije navedena, ona će biti jednaka sadržaju sloja, uključujući margine i ivice. Primjer 3.24 uzima katalog proizvoda kreiran u prethodnom odjeljku korištenjem inline-blok elemenata i redizajnira ga tako da koristi float. Da bi blokovi bili vidljivi, pozadina web stranice je postavljena na sivu.
Primjer 3.24. Horizontalni blokovi
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Računari i kancelarijska oprema 4296
Mobilni uređaji 2109
Fotografije 315
Video 1856
Rezultat primjera prikazan je na sl. 3.35.
Rice. 3.35. Raslojavanje slojeva kada se koristi svojstvo float
Zbog različitog teksta u potpisu, i visina blokova se ispostavlja različitom, zbog čega se neki blokovi "hvataju" za druge i ne prelaze u drugu liniju. Postavljanje visine svih blokova preko svojstva visine, na primjer 100px, ili vraćanje na korištenje display: inline-block ovdje može pomoći.
Utjecaj umotavanja
Svojstvo float, pored mogućnosti kreiranja plutajućih elemenata, ima niz karakteristika kojih morate biti svjesni. Glavna karakteristika je da plovak djeluje na sve obližnje elemente, prisiljavajući ih da učestvuju u plutanju. Pogledajmo primjer 3.25, koji pokazuje kako kreirati strelice na jednoj liniji koristeći lijevu i desnu vrijednost svojstva float.
Primjer 3.25. Utjecaj umotavanja
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Iako tekst i strelice koriste različite blok elemente i moraju biti na odvojenim linijama, efekat plutanja uzrokuje da se tekst podigne više dok pada u float (slika 3.36). Takođe, boja pozadine sloja strelice nije prikazana zbog činjenice da plutajući elementi ne učestvuju u toku dokumenta, u stvari, ovo je isto kao da sloj sa strelicom ostavite praznim.
Rice. 3.36. Kako prelamanje utiče na osnovni tekst
Plutajući elementi ne utječu na visinu bloka u kojem se nalaze. Da biste to otkrili, dovoljno je ograditi blok okvirom i postaviti plutajući element sa tekstom unutra (primjer 3.26).
Primjer 3.26. Visina bloka
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Crtež ne utiče na visinu sloja i prelazi njegove granice (slika 3.37).
Rice. 3.37. Visina plutajućeg sloja
Sve ove karakteristike plutajućih elemenata mogu imati prilično neugodan učinak na izgled web stranice, posebno u slučajevima poput gore navedenih. Glavni način da se postigne željeni rezultat je da otkažete zamatanje u pravo vrijeme. Postoji nekoliko načina da to učinite.
Otkaži omatanje
Omotavanje je moćan alat za raspored koji se koristi za poravnavanje i preuređivanje elemenata. Međutim, da bi se ovaj instrument držao pod kontrolom, potrebna je protuteža, bez koje se ogroman potencijal plutanja svodi na nekoliko uskih zadataka. Govorimo o otkazivanju omota različitim metodama. Nabrojimo četiri najpopularnije.
Širina artikla
Ako plutajući element zauzme cijelu dostupnu širinu, onda će ostali elementi koji slijede početi u novom redu. Da biste to učinili, morate omogućiti svojstvo širine sa vrijednošću od 100%. Dakle, stil u primjeru 3.25 može se dopuniti na sljedeći način:
Lijevo (float: lijevo; širina: 50%;) .desno (float: desno; širina: 50%; poravnanje teksta: desno;)
Svaki sloj sa strelicom je sada 50% širok i dodaje do 100% širine, tako da će pasus nakon sloja strelice početi na novom redu.
Ova metoda se rijetko koristi jer se širina ne može primijeniti na slike, a ne rješava problem s visinom sloja i pozadinom.
Korištenje overflow
Svojstvo overflow kontrolira prikaz sadržaja elementa bloka ako se ne uklapa u potpunosti i izvan je specificirane veličine. Automatska vrijednost posebno dodaje trake za pomicanje po potrebi, dok hidden prikazuje samo područje unutar elementa, a skriva ostatak. Dodatno, korištenje overflow sa autom, pomicanjem ili skrivenim će nadjačati float. Stil na primjer 3.25 je upotpunjen samo jednom linijom:
Strelica (preljev: skriveno;)
Rezultat se mijenja odmah nakon primjene svojstva overflow (slika 3.38).
Rice. 3.38. Utjecaj svojstva prelijevanja na pozadinu
Primjer 3.26 dopunjuje se na sličan način:
DIV (prelijevanje: skriveno;)
Rezultat je prikazan na sl. 3.39.
Rice. 3.39. Utjecaj svojstva preljeva na granicu
overflow je jedno od najpopularnijih svojstava floata. Ali ponekad se javljaju situacije kada je upotreba ove metode neprihvatljiva. Ovo se dešava kada se element proteže izvan elementa i on će biti "ošišan". U primjeru 3.27, slika je pomjerena ulijevo od prvobitne pozicije.
Primjer 3.27. Izrezivanje područja elementa
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Winnie the Pooh kod ZecaRezultat primjera prikazan je na sl. 3.40.
Rice. 3.40. Izrezivanje slike
U IE6, metoda radi samo kada je postavljeno svojstvo hasLayout. Da biste ga omogućili, možete dodati zumiranje: 1 zajedno sa svojstvom overflow.
Clear property
Da biste otkazali radnju float, svojstvo clear se primjenjuje sa sljedećim vrijednostima.
- lijevo - poništava float sa lijeve ivice elementa (float: lijevo). U tom slučaju, svi ostali elementi na ovoj strani bit će spušteni i smješteni ispod trenutnog elementa.
- desno - poništava float na desnoj strani elementa (float: desno).
- oba - poništava tok elementa u isto vrijeme sa desne i lijeve ivice. Preporučljivo je postaviti ovu vrijednost kada želite da poništite tok oko elementa, ali se ne zna tačno na kojoj strani.
Da biste otkazali radnju float, svojstvo clear mora se dodati elementu koji slijedi nakon float-a. Obično uvode generičku klasu kao što je clear i ubacuju praznu oznaku
Primjer 3.28. Korištenje clear
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
U ovom primjeru, svojstvo clear je postavljeno na oba. Ako trebate koristiti različite vrijednosti, možete unijeti više klasa i primijeniti ih prema potrebi.
Ova metoda je također jedna od najpopularnijih u rasporedu zbog svoje jednostavnosti i svestranosti. Ali opet, ponekad postoje kombinacije u kojima korištenje clear ne uspijeva. Ovo se dešava kada se u kodu susreće nekoliko različitih plutajućih vrednosti u isto vreme. Dakle, u primjeru 3.29, koristeći float, kreiraju se dvije kolone, au desnoj koloni float raspoređuje fotografije.
Primjer 3.29. Korištenje plovaka
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Meni
najbolje fotografije
Po komentarima
Sophia Cathedral
Poljska crkva
Nova linija
Rezultat primjera prikazan je na sl. 3.41. Svojstvo clear ne utiče samo na klasu fotografije, već i na klasu col1, tj. na svim elementima iznad koji su plutajući. Dakle, "Nova linija" ne počinje odmah nakon fotografija, već nakon završetka lijeve kolone.
Rice. 3.41. Greška pri prikazivanju niza
Kombinacija različitih metoda pomaže u ovakvim situacijama. Dakle, fotografije se mogu dodati u prelivni kontejner i ukloniti. Kolona će izgledati ovako.
Nova linija
The: nakon pseudo-elementa
Često uključivanje prazne oznake
Očisti lijevo: poslije (sadržaj: "."; / * Prikaži tekst nakon elementa (tačka) * / očisti: lijevo; / * Otkaži prelamanje * / vidljivost: skriveno; / * Sakrij tekst * / prikaz: blok; / * Blok element * / visina: 0; / * Visina * /)
Koji simbol se prikazuje nije bitno, on je u svakom slučaju skriven od korisnika kroz vidljivost, ali čak i skriven, tekst zauzima određenu visinu i utiče na obližnje elemente. Stoga se prikazani tekst još uvijek treba pretvoriti u blok element i postaviti na nultu visinu.
Budući da je tekst generiran pomoću: nakon pseudoelementa postavljen iza elementa, on lako zamjenjuje konstrukciju
... Gdje je to potrebno, potrebno je samo dodati klasu clearleft, kao što je prikazano u primjeru 3.30.Primjer 3.30. The: nakon pseudo-elementa
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Winnie the Pooh kod ZecaIE ne podržava: nakon do i uključujući verziju 7.0, tako da gornji primjer neće raditi u tim verzijama. Dodavanje zuma: 1 plutajućem elementu poništava premotavanje u IE.
Pogodnost gornje metode leži u korištenju klase clearleft, koja se dodaje bilo kojoj oznaci, ako je potrebno. Također možete uvesti dodatne klase, čiji će se stil razlikovati po drugim jasnim vrijednostima.
Kako umotati sliku u tekst u HTML i CSS - 4.4 od 5 na osnovu 16 glasova
Danas se slike koriste gotovo svuda na internetu. Nemoguće je zamisliti web stranicu koja nema sliku. Slike privlače pažnju, poboljšavaju izgled i osjećaj teksta. Stoga ćemo u ovoj lekciji naučiti kako pozicionirati slike u odnosu na tekst i pogledati kako učiniti da tekst teče oko slike u HTML-u, kao i korištenje CSS svojstava i vrijednosti.
Omotavanje slike tekstom pomoću HTML-a
Najjednostavniji način pozicioniranja slike na stranici je korištenje HTML alata. Ali ova metoda, u poređenju sa mogućnostima CSS-a, ima nedostatak, nema mogućnost postavljanja uvlake između slike i teksta, već samo vi možete učiniti da tekst teče oko slike.
Razmotrimo sve po redu. Da biste umetnuli sliku u HTML stranicu, koristite oznaku img, za više detalja pogledajte lekciju o tome kako umetnuti slike u HTML:. Stoga, da biste umetnuli sliku u tekst HTML stranice, dovoljno je upisati sljedeće u kodu:
Gdje je foto.jpg relativna putanja do slike..jpg
Oznaka img ima atribut align, koji određuje na kojoj ivici će slika biti pozicionirana i sa koje ivice će tekst teći oko nje (na primjer, align = "lijevo" duž lijeve ivice). Atribut align ima sljedeća značenja:
- lijevo - slika će biti pozicionirana lijevo, a tekst će teći oko nje desno;
- desno - slika će se nalaziti s desne strane, a tekst će teći oko nje lijevo;
- dno - odgovorno je za vertikalno poravnanje, pri čemu je slika na lijevoj strani, a donji dio slike u odnosu na prvi red teksta, ova vrijednost je postavljena po defaultu;
- top - isto kao i prethodna vrijednost, samo će se red teksta nalaziti na vrhu slike;
- sredina - sa ovom vrednošću, sredina slike je poravnata sa osnovnom linijom linije.
Pogledajmo sada svaki element u praksi.
1. Kao što sam već spomenuo, slika je po defaultu postavljena na bootom, odnosno, bez obzira da li je pišemo ili ne, naša slika će biti pozicionirana u odnosu na tekst na sljedeći način:
2. Da biste sliku poravnali s lijeve strane, a tekst omotan oko nje s desne strane, potrebno je da napišete sljedeće:
3. Da biste poravnali sliku udesno, potrebno je da napišete u skladu s tim:
4. Pogledajmo sada vertikalno poravnanje. Ako primijenite gornju vrijednost, tada će prvi red teksta biti postavljen na vrh slike.
5. Poravnanje teksta u sredini slike. Ova tehnika je vrlo dobra za korištenje ako trebate postaviti malu sliku u sredinu linije.
Premotajte tekst oko slike koristeći CSS svojstva
Zapravo, oni primjeri prelamanja teksta i pozicioniranja slike o kojima smo gore govorili su malo zastarjeli, sada je uobičajeno da se svi elementi odgovorni za izgled stranice rade koristeći CSS svojstva i vrijednosti.
Pogledajmo jednostavan primjer kako da tekst teče oko slike kada je slika pozicionirana lijevo, a tekst teče oko nje desno. Istovremeno ćemo postaviti određene uvlake između teksta i slike.
Na početku morate našoj slici dodijeliti određenu klasu, ovdje možete koristiti bilo koju riječ, glavna stvar da do zastoja shvatite za šta je tačno ova klasa odgovorna u dizajnu vaše stranice. Ovo se radi ovako:
Sada klasu leftfoto treba stilizirati nekim specifičnim CSS-om.
Lijeva fotografija (float: lijevo; margina: 4px 10px 2px 0px;)
Ovaj kod se nalazi između oznaka
... prilaganjem oznaka ili postavljen u eksterni CSS stilski list.Pogledajmo elemente koje smo postavili ovdje:
- float: lijevo; - pozicionirali smo sliku lijevo i učinili da tekst teče oko slike desno, ovo je u suštini isto kao atribut align = "left".
- margina: 4px 10px 2px 0px; - postavljamo margine, 4px odozgo, 10px s desne strane, 2px odozdo i 0px s lijeve strane slike.
Upotreba slika na html stranici je uvijek informativnija i jasnija u odnosu na čvrsti tekst.
Sliku je moguće ubaciti u html-tekst na nekoliko načina, a u klasicima ovih načina postoje 3:
- centralno poravnanje slike
- premotati tekst oko slike
- postavljanje slike u polje
Poravnavanje slike po sredini
Da biste poravnali sliku sa središtem stupca teksta, najlakši način je označiti staviti u kontejner
Za koje je postavljen atribut align = "center". Ako očekujete čestu upotrebu slika, onda bi bilo bolje koristiti CSS stil za oznaku
Pogledajte primjer 1 kako se to radi.
Primjer 1: Poravnavanje slike prema sredini
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <glava> <meta http-equiv = "Content-Type" content = "tekst / html; charset = utf-8"> <naslov> Center Drawing</ naslov> <style type = "text / css"> </ stil> </ glava> <tijelo> <p class = "cimg"> <img src = "images / sample.gif" širina = "200" visina = "100" alt = "(! LANG: Ilustracija" > !} </ p> </ tijelo> </ html> |
U ovom primjeru, na kontejner
Dodajte cimg CSS klasu, koja postavlja poravnanje na centar linije. Kako će to shematski izgledati prikazano je na slici 1.
Rice. 1. Slika u sredini stupca teksta
Premotajte tekst oko slike
Omotavanje teksta oko slike jedna je od najčešćih metoda HTML izgleda stranice, koja vam omogućava da efikasno koristite sav slobodan prostor. popularne tehnike izgleda web stranice, kada se slika nalazi na ivici prozora pretraživača, a tekst ide oko nje sa drugih strana (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 na lijevoj strani stranice i omotana oko teksta na desnoj strani
Da biste omotali sliku tekstom koristeći HTML, morate zapamtiti da je oznaka postoji atribut align, koji određuje poravnanje slike u dokumentu i istovremeno specificira kako se tekst omota oko slike. Da biste poravnali sliku udesno i postavili tok ulijevo, trebate koristiti align = "desno", da biste poravnali lijevo i tekst udesno, koristite align = "lijevo". Ovdje je također korisno koristiti atribute oznaka
- vspace i hspace, koji označavaju koliko će tekst teći oko slike okomito i horizontalno. Bez navođenja ovih atributa, tekst će biti blizu slike (primjer 2).
Primjer 2: Omotavanje slike tekstom pomoću HTML-a
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <glava> <meta http-equiv = "Content-Type" content = "tekst / html; charset = utf-8"> <naslov> Slika u tekstu</ naslov> </ glava> <tijelo> <p> <img src = "images / sample.gif" širina = "100" visina = "200" alt = "(! LANG: Ilustracija" align = "left" vspace = "5" hspace = "5" > !} </ p> </ tijelo> </ 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 podesili tok slike koristeći CSS stilove, koristićemo pravilo float. float: desno - poravnava sliku udesno od dokumenta i čini tekst premotavanjem lijevo, a float: lijevo poravnava sliku lijevo od dokumenta i prelama tekst desno od slike (primjer 3).
Primjer 3. Omotavanje slike tekstom pomoću CSS-a
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <glava> <meta http-equiv = "Content-Type" content = "tekst / html; charset = utf-8"> <naslov> Slika u tekstu</ naslov> <style type = "text / css"> </ stil> </ glava> <tijelo> <p> <img src = "images / sample.gif" širina = "100" visina = "200" alt = "(! LANG: Ilustracija" class = "cimg" > !} 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.</ p> </ tijelo> </ 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.
Evo oznake dodaje se klasa cimg, koja ima desno poravnanje postavljeno na float: desno, a tok slike lijevo i dolje je postavljen svojstvima padding-left: 10px i padding-bottom: 10px.
Slika na terenu
Sa ovim formatom postavljanja slike u dokument, tok oko slike se odvija samo na jednoj strani. 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. Zapravo, izgleda kao dvije kolone, jedna od njih sadrži sliku, a druga tekst (slika 3).
Rice. 3. Postavljanje slike u polje lijevo od teksta
Znam za dva načina za kreiranje ovakve strukture - korištenjem HTML oznaka
