Posljednje ažuriranje: 21.04.2016
Obično se svi blokovi i elementi na web stranici pojavljuju u pregledniku redoslijedom kojim su definirani u html kodu. Međutim, CSS pruža posebno svojstvo float koje nam omogućuje postavljanje tijeka oko elemenata, tako da možemo stvoriti zanimljivije i raznolikije 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 desnog ruba elementa
desno: element se pomiče udesno
ništa: poništava omatanje i vraća objekt u normalan položaj
Prilikom primjene svojstva float na stilizirane elemente osim img elementa, preporuča se da postavite svojstvo širine.
Dakle, zamislimo da trebamo prikazati sliku lijevo od glavnog teksta na stranici, s desne strane bi trebala biti bočna traka, a ostatak prostora trebao bi zauzeti glavni tekst članka. Definirajmo prvo sučelje stranice bez svojstva float:
Stari hrast, sav preobražen, raširen u šatoru raskošnog, tamnog zelenila, otopio se, lagano se njišući na zrakama večernjeg sunca...
"Ne, život nije gotov u dobi od 31 godine", iznenada je konačno, bez razlike, odlučio princ Andrew ...
U ovom slučaju, dobit ćemo sekvencijalno postavljanje elemenata na stranici:
Sada ćemo na istoj stranici primijeniti svojstvo float, mijenjajući stilove na sljedeći način:
Slika (float: lijevo; / * float ulijevo * / 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; / * omotajte udesno * /)
U skladu s tim ć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 zamatanje. Jasno vlasništvo
Ponekad je potrebno onemogućiti omatanje. Sličan zadatak može biti relevantan ako blok treba premotati dolje u novi red, a ne teći oko plutajućeg elementa. Na primjer, podnožje u pravilu treba biti strogo pri dnu i protezati se cijelom širinom stranice. Ako se ispred podnožja nalazi plutajući element, podnožje se može omotati oko tog elementa, što nije poželjno.
Kako bi se spriječilo prelamanje u CSS-u, svojstvo clear koristi se za uputu pregledniku da ne primjenjuje prelamanje na stilizirani element.
Svojstvo clear može imati sljedeće vrijednosti:
lijevo: stilizirani element može se omotati oko plutajućeg elementa s desne strane. Na lijevoj strani, omotavanje ne radi.
desno: stilizirani element može se omotati samo oko lebdećeg elementa s lijeve strane. A zamotavanje s desne strane ne radi.
oboje: stilizirani element može se omotati oko plutajućih elemenata i pomicati se prema dolje u odnosu na njih
ništa: stilizirani element ponaša se na standardan način, tj. sudjeluje u toku desno i lijevo
Na primjer, recimo da je podnožje definirano na web stranici:
Prisutnost omota će stvoriti netočan prikaz u kojem se podnožje pomiče 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 analizirat ćemo 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. Omatanje sa stilovima oznaka ![]()
Slika se može poravnati samo korištenjem stilova CSS oznaka ... Kao što znate, sintaksa oznake omogućuje vam da postavite poravnanje slike u atributima:
gdje VALUE može poprimiti vrijednosti
- lijevo - lijevo poravnanje
- desno - desno poravnanje
- dno - poravnanje na prvi redak teksta (ova vrijednost je zadana)
- vrh - poravnava s gornjim redom teksta
- sredina - poravnanje s osnovnom linijom teksta
na primjer
Tekst teksta tekst tekst tekst tekst
tekstualni tekst text text text text
Čini se da je slika zalijepljena za tekst, pa napravimo neke uvlake. Štoviše, postoje dvije mogućnosti 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 ulijevo. Umjesto margine možete koristiti padding, učinak će biti isti.
Korištenje svojstva float umjesto poravnanja
Osim svojstva align u atributima oznake stilovi imaju svojstvo CSS float koje je također odgovorno za poravnanje. Sintaksa je sljedeća:
plutati: desno; // Desno poravnanje plutati: lijevo; // Lijevo poravnanje
Na primjer, ako u prethodnom primjeru napišete izlaz slike na sljedeći način:
Zatim se prevodi u sljedeće.
Vlad Merzhevich
Plutajući elementi nazivat će se oni elementi koji su omotani oko konture drugim objektima web stranice, na primjer, tekstom. Ispravnije je reći "pokrenuti elementi", ali s druge strane, pojam "plutajući element" odavno se ukorijenio, pa ću ga koristiti u budućnosti.
Plutajući elementi prilično se aktivno koriste u izgledu web stranica i služe za provedbu ovih, a ne samo zadataka:
- omatanje slika tekstom;
- stvaranje bočnih traka;
- horizontalni izbornici;
- stupaca.
Omatanje 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.
Riža. 3.32. Zamotajte tekst oko slike
Sam HTML kod ostaje u biti 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 s lijevom vrijednošću u oznaku ... Ova vrijednost poravnava element lijevo od njegovog nadređenog ili drugog plutajućeg elementa, a svi ostali elementi, poput teksta, teku udesno. Suprotno tome, desno poravnava element s desne strane 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 vlastitu marginu sa svake strane 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, pogotovo u jedanaest sati ujutro, jer je u to vrijeme doručak već odavno završio, a večera još nije mislila početi. I, naravno, bio je užasno oduševljen kad je vidio Zeca kako vadi šalice i tanjure.
Rezultat primjera prikazan je na sl. 3.33.
Riža. 3.33. Lijevo poravnato i desno premotavanje crteža
Napravite bočne trake
Umetak je blok sa slikama i tekstom koji je ugrađen u glavni tekst. Okvir se obično nalazi na lijevom ili desnom rubu tekstualnog bloka, a glavni tekst teče oko njega s drugih strana (slika 3.34).
Riža. 3.34. Vrsta umetka
Kako bi se okvir istaknuo u tekstu, obično ima boju pozadine i obrub. Okviri svojim izgledom podsjećaju na gornju metodu omotanja teksta oko slike, pa je kod za izradu okvira gotovo identičan prethodnom (primjer 3.23).
Primjer 3.23. Dodavanje okvira
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
- Alat za čarobno brisanje.
Radi slično kao i alat Magic Wand, ali za razliku od njega ne odabire 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 dobit ćemo transparentno područje.
Princip rada s alatom Magic Erase sličan je radu s alatom Magic Wand. Naime, prvo postavljamo odgovarajuću vrijednost Tolerance, omogućavamo potvrdni okvir Anti-aliased za stvaranje glatkih granica, poništavamo parametar Contiguous da uklonimo cijelu pozadinu odjednom, a zatim kliknemo na fotografiju u području neba. Ako je pozadinski sloj prethodno preimenovan, dobit ćemo prozirna područja na pravim mjestima.
Prilikom izrade okvira svakako navedite njegovu širinu pomoću svojstva širine. Inače će veličina sloja biti mnogo šira nego što je potrebno.
Slojevi vodoravno
Prema zadanim postavkama, blok elementi su poredani okomito, jedan ispod drugog, ali koristeći svojstvo float, možete učiniti da se pojavljuju jedan pored drugog vodoravno. U tom slučaju morate postaviti širinu slojeva i postaviti ih da lebde. Ako širina nije navedena, bit će jednaka sadržaju sloja, uključujući margine i obrube. Primjer 3.24 uzima katalog proizvoda kreiran u prethodnom odjeljku koristeći elemente inline-bloka i redizajnirao ga za korištenje float. Kako 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čunala i uredska oprema 4296
Mobilni uređaji 2109
Fotografije 315
Video iz 1856
Rezultat primjera prikazan je na sl. 3.35.
Riža. 3.35. Raslojavanje slojeva pri korištenju svojstva float
Zbog različitog teksta u potpisu i visina blokova se ispostavlja različitom, zbog čega se neki blokovi "prilijepe" uz druge i ne prelaze u drugu liniju. Postavljanje visine svih blokova putem svojstva visine, na primjer 100px, ili vraćanje na korištenje display: inline-block ovdje može pomoći.
Utjecaj omatanja
Svojstvo float, osim mogućnosti stvaranja plutajućih elemenata, ima niz značajki kojih morate biti svjesni. Glavna značajka je da plovak djeluje na sve obližnje elemente, prisiljavajući ih da sudjeluju u plutanju. Pogledajmo primjer 3.25, koji pokazuje kako stvoriti strelice na jednoj liniji koristeći lijevu i desnu vrijednost svojstva float.
Primjer 3.25. Utjecaj omatanja
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Iako tekst i strelice koriste različite blok elemente i moraju se nalaziti u zasebnim redovima, učinak plutanja uzrokuje da se tekst uzdiže više dok pada u float (slika 3.36). Također, boja pozadine sloja sa strelicama nije prikazana zbog činjenice da plutajući elementi ne sudjeluju u toku dokumenta, u stvari, to je isto kao da sloj sa strelicom ostavite praznim.
Riža. 3.36. Kako prelamanje utječe na temeljni tekst
Plutajući elementi ne utječu na visinu bloka u kojem se nalaze. Da bi se to otkrilo, dovoljno je blok ograditi okvirom i unutar njega postaviti plutajući element s tekstom (primjer 3.26).
Primjer 3.26. Visina bloka
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Crtež ne utječe na visinu sloja i prelazi njegove granice (slika 3.37).
Riža. 3.37. Visina plutajućeg sloja
Sve ove značajke plutajućih elemenata mogu imati prilično neugodan učinak na izgled web stranice, posebno u slučajevima poput gore navedenih. Glavni način za postizanje željenog rezultata je otkazivanje omatanja u pravo vrijeme. Postoji nekoliko načina da to učinite.
Otkažite omatanje
Omatanje je moćan alat za raspored koji se koristi za poravnavanje i promjenu redoslijeda elemenata. Međutim, da bi ovaj instrument bio pod kontrolom, potrebna je protuuteg, bez koje se golemi potencijal plutanja svodi na nekoliko uskih zadataka. Govorimo o otkazivanju omatanja različitim metodama. Nabrojimo četiri najpopularnije.
Širina artikla
Ako plutajući element zauzme cijelu dostupnu širinu, tada će ostali elementi nakon njega započeti u novom retku. Da biste to učinili, morate omogućiti svojstvo širine s 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%; text-align: desno;)
Svaki sloj sa strelicama sada je širok 50% i dodaje do 100% širine, tako da će odlomak nakon sloja strelice početi u novom retku.
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 preljeva
Svojstvo overflow kontrolira prikaz sadržaja elementa bloka ako se ne uklapa u potpunosti i izvan je navedene veličine. Automatska vrijednost posebno dodaje trake za pomicanje prema potrebi, dok hidden prikazuje samo područje unutar elementa, a skriva ostalo. Osim toga, korištenje preljeva s automatskim, pomicanjem ili skrivenim će nadjačati float. Stil, na primjer 3.25, dovršen je samo jednom linijom:
Strelica (preljev: skriveno;)
Rezultat se mijenja odmah nakon primjene svojstva preljeva (slika 3.38).
Riža. 3.38. Učinak svojstva preljeva na pozadinu
Primjer 3.26 dopunjuje se na sličan način:
DIV (preljev: skriveno;)
Rezultat je prikazan na sl. 3.39.
Riža. 3.39. Utjecaj svojstva preljeva na granicu
overflow je jedno od najpopularnijih svojstava float-a. Ali ponekad se javljaju situacije kada je uporaba ove metode neprihvatljiva. To se događa kada se element proteže izvan elementa i bit će "ošišan". U primjeru 3.27, slika je pomaknuta ulijevo od svog izvornog položaja.
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.
Riža. 3.40. Obrezivanje slike
U IE6, metoda radi samo kada je postavljeno svojstvo hasLayout. Da biste ga omogućili, možete dodati zumiranje: 1 zajedno sa svojstvom preljeva.
Jasno vlasništvo
Za poništavanje radnje float, svojstvo clear se primjenjuje sa sljedećim vrijednostima.
- lijevo - poništava float s lijevog ruba elementa (float: lijevo). U tom će slučaju svi ostali elementi s ove strane biti spušteni i smješteni ispod trenutnog elementa.
- desno - poništava float na desnoj strani elementa (float: desno).
- oboje - poništava tok elementa u isto vrijeme s desnog i lijevog ruba. Preporuča se postaviti ovu vrijednost kada želite poništiti tok oko elementa, ali se ne zna točno s koje strane.
Da biste poništili radnju float, svojstvo clear mora se dodati elementu nakon float-a. Obično uvode generičku klasu poput 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 postavljeno je 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 izgledu zbog svoje jednostavnosti i svestranosti. Ali opet, ponekad postoje kombinacije u kojima korištenje clear ne uspijeva. To se događa kada se u kodu susreće nekoliko različitih plutajućih vrijednosti u isto vrijeme. Dakle, u primjeru 3.29, koristeći float, kreiraju se dva stupca, au desnom stupcu float slaže fotografije.
Primjer 3.29. Korištenje plovaka
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
izbornik
najbolje fotografije
Po komentarima
Sofijska katedrala
poljska crkva
Nova linija
Rezultat primjera prikazan je na sl. 3.41. Svojstvo clear ne utječe samo na klasu fotografije, već i na klasu col1, t.j. na svim elementima iznad koji su plutajući. Stoga "Nova linija" ne kreće odmah nakon fotografija, već nakon završetka lijeve kolone.
Riža. 3.41. Pogreška pri prikazivanju niza
Kombinacija različitih metoda pomaže u ovakvim situacijama. Dakle, fotografije se mogu dodati u preljevni spremnik i ukloniti ulijevo. 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 (točka) * / očisti: lijevo; / * Otkaži prelamanje * / vidljivost: skriveno; / * Sakrij tekst * / prikaz: blok; / * Blok element * / visina: 0; / * Visina * /)
Koji se simbol prikazuje nije bitno, on je ionako skriven od korisnika kroz vidljivost, ali čak i skriven, tekst zauzima određenu visinu i utječe na obližnje elemente. Stoga se prikazani tekst još uvijek treba pretvoriti u blok element i postaviti na nultu visinu.
Budući da se tekst generiran pomoću: nakon pseudoelementa stavlja iza elementa, lako zamjenjuje konstrukciju
... Gdje je to potrebno, trebate 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 prelamanje u IE.
Pogodnost gornje metode leži u korištenju klase clearleft, koja se po potrebi dodaje bilo kojoj oznaci. Također možete uvesti dodatne klase, čiji će se stil razlikovati po drugim jasnim vrijednostima.
Kako zamotati sliku tekstom u HTML i CSS - 4.4 od 5 na temelju 16 glasova
Danas se slike koriste gotovo posvuda na internetu. Nemoguće je zamisliti web stranicu koja nema sliku. Slike privlače pažnju, poboljšavaju izgled i dojam 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.
Omatanje slike tekstom pomoću HTML-a
Najjednostavniji način pozicioniranja slike na stranici je korištenje HTML alata. Ali ova metoda, u usporedbi s 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 je za umetanje slike u tekst HTML stranice dovoljno u kodu napisati sljedeće:
Gdje je foto.jpg relativni put do slike..jpg
Oznaka img ima atribut align, koji određuje na kojem rubu će se slika postaviti i s kojeg ruba će tekst teći oko nje (na primjer, align = "lijevo" duž lijevog ruba). Atribut align ima sljedeća značenja:
- lijevo - slika će biti pozicionirana s lijeve strane, a tekst će teći oko nje s desne strane;
- desno - slika će se nalaziti s desne strane, a tekst će teći oko nje lijevo;
- dno - odgovorno je za okomito poravnanje, sa slikom na lijevoj strani, a donji dio slike u odnosu na prvi redak teksta, ova je vrijednost postavljena prema zadanim postavkama;
- top - isto kao i prethodna vrijednost, samo će se redak teksta nalaziti na vrhu slike;
- sredina - s ovom vrijednošću, sredina slike je poravnata s osnovnom linijom linije.
Pogledajmo sada svaki element u praksi.
1. Kao što sam već spomenuo, prema zadanim postavkama slika je postavljena na bootom, odnosno, bez obzira na to jesmo li to propisali ili ne, naša će slika 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, trebate napisati sljedeće:
3. Da biste sliku poravnali udesno, morate u skladu s tim napisati:
4. Sada pogledajmo okomito poravnanje. Ako primijenite gornju vrijednost, tada će prvi redak teksta biti postavljen na vrh slike.
5. Poravnavanje teksta u sredini slike. Ova tehnika je vrlo dobra za korištenje ako trebate postaviti malu sliku u središte linije.
Premotajte tekst oko slike pomoću CSS svojstava
Zapravo, oni primjeri prelamanja teksta i pozicioniranja slike o kojima smo gore govorili su malo zastarjeli, sada je uobičajeno raditi sve elemente odgovorne za izgled stranice koristeći CSS svojstva i vrijednosti.
Pogledajmo jednostavan primjer kako tekst teče oko slike kada je slika pozicionirana s lijeve strane, a tekst teče oko nje s desne strane. Ujedno ć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 u zastoju shvatite za što je točno ova klasa odgovorna u dizajnu vaše stranice. To 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 postavljeno u vanjski CSS stilski list.Pogledajmo elemente koje smo ovdje postavili:
- plutati: lijevo; - pozicionirali smo sliku lijevo i učinili da tekst teče oko slike desno, to je u biti isto kao atribut align = "lijevo".
- 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 uvijek je informativnija i jasnija u usporedbi s čvrstim tekstom.
Sliku je moguće umetnuti u html-tekst na nekoliko načina, a u klasicima ovih načina postoje 3:
- središnje poravnanje slike
- omotati tekst oko slike
- postavljanje slike u polje
Poravnavanje slike po sredini
Da biste sliku poravnali sa središtem stupca teksta, najlakši način je označiti staviti u posudu
Za koji je postavljen atribut align = "center". Ako očekujete čestu upotrebu slika, onda bi bilo bolje koristiti CSS stil za oznaku
Pogledajte primjer 1 za 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> Središnji crtež</ 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 spremnik
Dodajte cimg CSS klasu, koja postavlja poravnanje u središte linije. Kako će to shematski izgledati prikazano je na slici 1.
Riža. 1. Slika u središtu stupca teksta
Premotajte tekst oko slike
Omatanje teksta oko slike jedna je od najčešćih metoda HTML izgleda stranice, koja vam omogućuje učinkovito korištenje cijelog slobodnog prostora. popularne tehnike izgleda web stranice, kada je slika smještena na rubu prozora preglednika, a tekst je obilazi s drugih strana (slika 2). Kako biste prilagodili prelamanje teksta oko slike, možete koristiti nekoliko metoda temeljenih na HTML-u i CSS-u.
Riža. 2. Slika je poravnata s lijeve strane stranice i omotana oko teksta s desne strane
Da biste sliku omotali tekstom pomoću HTML-a, morate zapamtiti da je oznaka postoji atribut align, koji određuje poravnanje slike u dokumentu i ujedno specificira kako se tekst omota oko slike. Da biste sliku poravnali udesno i postavili tok ulijevo, trebate upotrijebiti align = "desno", za poravnanje lijevo i tekst udesno koristite align = "lijevo". Ovdje je također korisno koristiti atribute oznake
- vspace i hspace, koji označavaju koliko će tekst teći oko slike okomito i vodoravno. Bez navođenja ovih atributa, tekst će se usko prilijepiti slici (primjer 2).
Primjer 2: Omatanje 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.
Kako bismo prilagodili tok slike pomoću CSS stilova, koristit ćemo pravilo float. float: desno - poravnava sliku s desne strane dokumenta i čini da se tekst prelama lijevo, a float: lijevo poravnava sliku s lijeve strane dokumenta i prelama tekst s desne strane slike (primjer 3).
Primjer 3. Omatanje 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 dodana je klasa cimg, koja ima desno poravnanje postavljeno na float: right, a tok slike lijevo i dolje je postavljen svojstvima padding-left: 10px i padding-bottom: 10px.
Slika na terenu
S ovim formatom postavljanja slike u dokument, tok oko slike događa se samo s jedne strane. Ova metoda postavljanja nalikuje strukturi s dva stupca, gdje je slika smještena u jedan stupac, a tekst u drugi.
Kod ove sheme slika se nalazi desno ili lijevo od teksta, te teče samo s jedne strane. Zapravo, izgleda kao dva stupca, jedan od njih sadrži sliku, a drugi tekst (slika 3).
Riža. 3. Postavljanje slike u polje lijevo od teksta
Znam za dva načina za stvaranje ovakve strukture - korištenjem HTML oznaka
