Često se dizajneru izgleda daju određeni nestandardni zadaci. Naš cilj je ponuditi najracionalnije i najispravnije rješenje. Danas ćemo govoriti o karakteristikama premotavanja teksta oko slike.
Formulacija problema
Pisanje članka za vaš informativni izvor ili blog često će biti popraćeno uvrštavanjem slika usput. Budući da je robot za pretraživanje oduvijek poštovao prisutnost slika na web stranici, korisnik će biti zadovoljniji tekstom sa svijetlim slikama. Otuda potreba za instaliranjem posebne metode oblikovanja koja će osigurati prekrasnu interakciju između teksta i slika.
Razmotrimo slučaj kada prelamanje teksta nije potrebno. Štoviše, nudim univerzalnu opciju - u nedostatku slike, tekst se proteže cijelom širinom bloka (neće svi vaši članci biti popraćeni ilustracijama). Širina tekstualnog bloka nije striktno fiksna. U nastavku pogledajte kako bi naš blok trebao izgledati.
Ispravno rješenje
Da bismo implementirali zadatak, kreiramo dva bloka: jedan za sliku, drugi za tekst. Uzimajući u obzir činjenicu da ispod slike mogu biti i drugi elementi, kreiramo poseban kontejner za sliku, inače to nije potrebno, jednostavno možete dodijeliti potrebnu klasu oznaci slike.
HTML
< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Blok teksta
Prikaz: inline; )
Ovo je standardno rješenje za tekst koji će se omotati oko bloka sa slikom. To će izgledati ovako:
Bilo bi sasvim logično predložiti da se tekstu dodijele svojstva plutajućeg objekta. Ako širine objekata nisu podešene, dobijamo sljedeću sliku:
Da biste izbjegli ovaj efekat, jednostavno morate odrediti širinu tekstualnog bloka, ali to ne ispunjava uvjete našeg zadatka.
Sljedeća dobra opcija bila bi korištenje svojstva margin-left. Budući da će za blog, najvjerovatnije, sve slike u ovom bloku biti objedinjene po veličini, rješenje u principu nije loše i efikasno. Međutim, ovo je samo poseban slučaj, jer ako u članku nema slike, s lijeve strane će jednostavno biti prazna traka. Ovo nam ne odgovara. Tražimo univerzalno rješenje!
A najispravnije rješenje, kao što se često dešava, je najjednostavnije. Da biste postigli željeno formatiranje tekstualnog bloka, morate pristupiti svojstvu prelivanja sa vrijednošću skriveno. Ne zaboravite na jedinstveni Internet Explorer. Kao i obično, pokazuje se i zahtijeva dodatnu pažnju! Da bi naš stari radio normalno, dodamo svojstvo float u tekstualni blok (nakon pristupa svojstvu overflow, definiranje fiksne širine neće biti potrebno).
Tako smo došli do ispravnog rješenja, koje će dovesti do efekta prikazanog na slici u pododjeljku koji opisuje uslove našeg zadatka.
Slika ( float: lijevo; /*wrap */ margina: 10px; /*vanjska podstava za ljepotu */ display: inline; /* za IE6, tako da se lijeva margina ne udvostruči */) . text( overflow: hidden; float: lijevo; )
Nedostaci metode i alternative
Unatoč jednostavnosti i svestranosti metode, koja se sastoji u korištenju overflow:hidden, postoji jedan nedostatak. Svojstvo više neće obavljati svoje funkcije ako se u tekstualnom dijelu koriste padajući elementi.
U ovom slučaju, trebat će vam alternativa za konfiguriranje željenog oblikovanja. Ova tehnika će se temeljiti na funkcionalnosti kombinacije display:table-cell;. Ovo rješenje je jednako učinkovito, ali malo inferiornije u jednostavnosti u odnosu na prvu metodu. Kada pozivate ovu metodu, takođe morate da podesite izgled da radi u okruženju Internet Explorer-a
Img ( float: lijevo; /* postaviti omotavanje */ margina: 10px; /* udubljenje za ljepotu */ display: inline; /* za IE6, tako da se lijeva margina ne udvostruči */) . tekst (prikaz: ćelija tabele; zumiranje: 1 ; /* Pažljivo! Niz je nevažeći */ }
I ovo rješenje ima svoje karakteristike koje je potrebno uzeti u obzir prilikom postavljanja. Ako je tekstualni dio dovoljno kratak, sljedeći blok će biti prikazan desno od bloka s klasom teksta. Da biste to izbjegli, trebate priložiti blok teksta i sliku u poseban spremnik.
U kojim pretraživačima radi?
| 6.0+ | 5.0+ | 9.5+ | 4.0+ | 3.0+ | - | - |
Svi HTML elementi na web stranici su raspoređeni u zajedničkom toku, od vrha do dna (za blok elemente) i s lijeva na desno (za inline elemente). Ova metoda prikaza nije baš efikasna, ali zahvaljujući CSS-u moguće je promijeniti dizajn na bolje.
Plutajući elementi
Kada definirate plutajući element, trebate ga postaviti u kodu direktno ispod elementa ispod kojeg želite da se sav drugi sadržaj koji se nalazi u kodu ispod plutajućeg elementa teći oko njega na web stranici. Pogledajmo bliže kako pretraživači učitavaju plutajuće elemente i drugi sadržaj na web stranici.
Prvo, pretraživač učitava elemente na stranicu normalnim redoslijedom, krećući se odozgo prema dolje, kada naiđe na plutajući element, postavlja ga na određenu stranu. Pretraživač isključuje ovaj element iz opšteg toka, i kao rezultat on "lebdi" na stranici.
Pošto je plutajući element isključen iz opšteg toka, preostali blok elementi koji se nalaze u kodu nakon njega se učitavaju na stranicu kao da ovaj element nije tamo. Imajte na umu da su blok elementi postavljeni ispod plutajućeg elementa, to je zato što plutajući element više nije dio ukupnog toka.
Ako pažljivo pogledate sliku, vidjet ćete da za razliku od blok elemenata, prilikom postavljanja inline elemenata ili običnog teksta unutar blok elementa, granice plutajućeg elementa se uzimaju u obzir, tako da se inline elementi i tekst kreću oko njega.
Imajte na umu da možete postaviti više plutajućih elemenata u jedan red ako to dozvoljava širina nadređenog elementa.
Napomena: Apsolutni i fiksni pozicionirani elementi zanemaruju svojstvo float.
Koristeći CSS svojstvo float, slika je napravljena da pluta na lijevoj strani. Tekst koji se nalazi u HTML kodu ispod slike će se omotati oko slike duž desne i donje strane.
Da biste stvorili prazan prostor između slike i teksta koji se omota oko nje, potrebno je da dodate dopunu slici. Budući da je slika pomaknuta na lijevu ivicu nadređenog elementa, dovoljno je dodati padding samo na desno i dno kako bi se tekst malo odmaknuo od njega:
Img ( float: lijevo; margina: 0 10px 10px 0; ) Pokušajte »
Cancel Wrap
Ponekad želite da prikažete element tako da na njega ne utiču lebdeći elementi ispred njega. Takav element, na primjer, može biti podnožje, koje bi u svakom slučaju trebalo biti prikazano ispod svih ostalih elemenata stranice. Ako na svojoj stranici imate visoku bočnu traku koja se nalazi na lijevoj ivici web stranice, podnožje se može podići i pojaviti desno od nje. Dakle, umjesto da bude pozicioniran na stranici, sadržaj podnožja će se pojaviti u ravnini sa bočnom trakom. Ovaj problem je rešen korišćenjem svojstva clear, koje govori pretraživaču da element koji se stilizuje ne treba da se omota oko plutajućeg elementa.
Svojstvo CSS clear može se postaviti na jednu od sljedećih vrijednosti:
- lijevo - plutajući elementi nisu dozvoljeni na lijevoj strani.
- desno - plutajući elementi nisu dozvoljeni na desnoj strani.
- oba - plutajući elementi su zabranjeni na obje strane.
- nijedan - dozvoljava lebdeće elemente sa obe strane.
Svojstvo clear specificira da plutajući elementi nisu dozvoljeni na desnoj strani. Tekst koji se nalazi ispod slike neće se omotati oko lijeve ivice slike.
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.
Zadatak
Dodajte sliku na stranicu tako da bude omotana oko susjednog teksta.
Rješenje
Omotavanje teksta oko slike obično se koristi za kompaktno raspoređivanje materijala i povezivanje ilustracija i teksta. Sam float se kreira pomoću svojstva float stila dodanog IMG selektoru. Lijeva vrijednost poravnava sliku lijevo, desna - desno. U ovom slučaju, strujanje se odvija duž drugih, slobodnih strana.
Primjer 1. Omotavanje slika
HTML5 CSS 2.1 IE Cr Op Sa Fx
Izveštaj poručnika Bokatueva
Jučer, tokom izviđačke akcije, našu grupu je napao nepoznati neprijatelj u Alien maskirnoj uniformi. Kao rezultat efikasne odbrane i brzog kontranapada, velika grupa militanata je slomljena i odbačena. Među osobljem nema žrtava. Borci izviđačke grupe pokazali su izvanredne vještine u korištenju oružja. Posebno se istakao u borbi vođa voda M. A. Kudryashev, koji je mudro koristio ljudske resurse svog voda. Kao rezultat operacije, elementi vanzemaljske kulture su uhvaćeni i prebačeni u analitičku grupu.
Saopštenje za javnost analitičke grupe
Psihotropno oružje razvijeno je u našim tajnim laboratorijama kao dio projekta Pandora. Kao rezultat neuspješnog eksperimenta, većina naučnika koji su radili na uređaju bila je izložena psihotropnom zračenju, a oni su, u stanju strasti, rastavili prototip. Možda su naši naučnici još uvijek u stanju strasti.
Rezultat ovog primjera prikazan je na sl. 1.
Rice. 1. Tekst sa ilustracijama
Korištenje svojstva float prisiljava tekst da se čvrsto uklopi u sliku. Stoga, primjer uvodi univerzalno svojstvo margin, koje dodaje dopunu između slike i teksta. Ovo svojstvo istovremeno postavlja uvlačenje na gornjoj, desnoj, donjoj i lijevoj strani fotografija.
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 elemente postavimo na plutajuće, tako da možemo kreirati zanimljivije i raznovrsnije web stranice u njihovom dizajnu.
Ovo svojstvo može imati jednu od sljedećih vrijednosti:
lijevo: Element se pomiče ulijevo, a sav sadržaj koji ide ispod njega obavija se oko desne ivice elementa
desno: element se pomiče udesno
ništa: poništava premotavanje i vraća objekt u normalnu poziciju
Kada koristite svojstvo float na elementima koji nisu img element koji treba stilizirati, preporučuje se postavljanje svojstva širine.
Dakle, zamislite da trebamo prikazati sliku na stranici lijevo od glavnog teksta, bočna traka bi trebala biti s desne strane, a ostatak prostora bi trebao zauzeti glavni tekst članka. Hajde da prvo definišemo interfejs stranice bez svojstva float:
Stari hrast, potpuno preobražen, prostirao se kao šator bujnog, tamnog zelenila, lagano se ljuljao, blago se ljuljao na zracima večernjeg sunca...
"Ne, život nije gotov u 31. godini", iznenada je konačno i neopozivo odlučio princ Andrej...
U ovom slučaju, dobićemo sekvencijalno postavljanje elemenata na stranici:
Sada ćemo na istoj stranici primijeniti svojstvo float, mijenjajući stilove na sljedeći način:
Slika ( float:left; /* float lijevo */ margin:10px; margin-top:0px; ) .sidebar( border: 2px solid #ccc; background-color: #eee; širina: 150px; padding: 10px; margin- lijevo: font-size: 20px float: desno /* premotavanje 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.
Nema protoka. čista imovina
Ponekad postaje neophodno zabraniti tokove. Sličan zadatak može biti relevantan ako neki blok treba premjestiti dolje u novi red, a ne omotati plutajući element. Na primjer, podnožje se u pravilu treba nalaziti strogo na dnu i protezati se cijelom širinom stranice. Ako postoji plutajući element ispred podnožja, onda podnožje može teći oko ovog elementa, što nije poželjno.
Kako bi spriječio premotavanje elemenata, CSS koristi svojstvo clear, koje govori pretraživaču da element koji se stilizira ne bi trebao imati primijenjeno premotavanje.
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 protok ne radi
desno: stilizirani element može lebdjeti samo lijevo od lebdećeg elementa. A na desnoj strani tok ne radi
oboje: stilizirani element može se omotati oko plutajućih elemenata i pomjeriti se prema dolje u odnosu na njih
none: stilizirani element se ponaša na standardni način, odnosno učestvuje u desnom i lijevom toku
Na primjer, recimo da je podnožje definirano na web stranici:
Prisustvo omota će stvoriti netačan prikaz u kojem se podnožje pomiče prema gore:
Promijenimo stil podnožja:
Podnožje( border-top: 1px solid #ccc; clear: oboje; )
Sada podnožje neće teći oko slike, već će se spuštati.
