Često se pred dizajnera izgleda postavljaju određeni nestandardni zadaci. Naš cilj je ponuditi najracionalnije i najispravnije rješenje. Danas ćemo govoriti o značajkama premotavanja teksta oko slike.
Formulacija problema
Pisanje članka za vaš informativni izvor ili blog često će biti popraćeno slikama na putu. Budući da je robot za pretraživanje oduvijek poštovao prisutnost slika na stranici, korisnik će biti zadovoljniji tekstom sa svijetlim slikama. Stoga je potrebna instalacija posebne metode oblikovanja koja će pružiti 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 rasteže cijelom širinom bloka (ipak neće svi vaši članci biti popraćeni ilustracijama). Širina bloka s tekstom nije strogo fiksna. U nastavku je kako bi naš blok trebao izgledati.
Prava odluka
Za provedbu zadatka stvaramo dva bloka: jedan za sliku, drugi za tekst. Uzimajući u obzir činjenicu da se ispod slike mogu nalaziti neki drugi elementi, stvaramo zaseban spremnik 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
Zaslon: 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 također dodijele svojstva plutajućeg objekta. Kada širine objekta nisu postavljene, dobivamo sljedeću sliku
Da bismo izbjegli ovaj učinak, samo trebamo odrediti širine 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 najvjerojatnije sve slike u ovom bloku biti objedinjene po veličini, rješenje, u principu, nije loše i učinkovito. Međutim, ovo je samo poseban slučaj, jer ako u članku nema slike, s lijeve strane će biti samo prazna stranica. Ovo nam ne odgovara. Tražimo univerzalno rješenje!
A najispravnije rješenje, kao što se često događa, je najjednostavnije. Da biste postigli željeno oblikovanje tekstualnog bloka, trebate pristupiti svojstvu preljeva s vrijednošću skriven. Ne zaboravite na jedinstveni Internet Explorer. Odjeven je kao i obično i zahtijeva dodatnu pažnju! Kako bi naš stari radio normalno, tekstualnom bloku dodajemo svojstvo float (nakon pristupa svojstvu overflow, definicija fiksne širine nije potrebna).
Tako smo došli do ispravnog rješenja, što će dovesti do učinka prikazanog na slici u pododjeljku, koji opisuje uvjete našeg problema.
Slika ( float: lijevo; /* premotavanje */ margina: 10px; /* margina za ljepotu */ zaslon: inline; /* za IE6, nemojte duplirati lijevi padding */) . tekst (preljev: skriven; plutajući: lijevo; )
Nedostaci metode i alternative
Unatoč jednostavnosti i svestranosti metode, koja se sastoji u primjeni overflow:hidden, postoji jedan nedostatak. Svojstvo će prestati obavljati svoje funkcije ako se u tekstualnom dijelu koriste padajući elementi.
U tom slučaju trebat će vam alternativa za postavljanje željenog oblikovanja. Ova tehnika će se temeljiti na funkcionalnoj kombinaciji display:table-cell;. Ovo rješenje je jednako učinkovito, ali malo inferiorno u jednostavnosti od prve metode. Prilikom pozivanja ove metode također je potrebno postaviti izgled da radi u okruženju Internet Explorera
img(float:lijevo; /* postavi omatanje */ margina: 10px /* uvlaka za ljepotu */ zaslon: inline; /* za IE6, nemojte duplirati lijevi padding */) . tekst (prikaz: ćelija tablice; zumiranje: 1 ; /* Pažljivo! Niz je nevažeći */ }
I ovo rješenje ima svoje karakteristike koje je potrebno uzeti u obzir pri rasporedu. Ako je tekstualni dio dovoljno kratak, tada će se sljedeći blok prikazati desno od bloka s klasom teksta. Da biste to izbjegli, morate priložiti blok teksta i sliku u poseban spremnik.
Na kojim preglednicima radi?
| 6.0+ | 5.0+ | 9.5+ | 4.0+ | 3.0+ | - | - |
Svi HTML elementi na web stranici raspoređeni su u zajedničkom toku, odozgo prema dolje (za blok elemente) i slijeva nadesno (za inline elemente). Ovakav način prikaza nije baš učinkovit, ali zahvaljujući CSS-u moguće je promijeniti dizajn na bolje.
plutajućih elemenata
Kada definirate plutajući element, trebate ga pozicionirati u kodu izravno ispod elementa ispod kojeg bi trebao "plutati", sve ostalo u kodu ispod plutajućeg elementa će teći oko njega na web stranici. Pogledajmo pobliže kako preglednici učitavaju plutajuće elemente i drugi sadržaj na web stranicu.
Prvo, preglednik učitava elemente na stranici normalnim redoslijedom, krećući se od vrha do dna, kada naiđe na plutajući element, postavlja ga na navedenu stranu. Preglednik isključuje ovaj element iz općeg toka i kao rezultat toga "lebdi" na stranici.
Budući da je plutajući element isključen iz općeg toka, ostali elementi bloka koji se nalaze u kodu nakon njega učitavaju se na stranicu kao da tog elementa nema. Imajte na umu da su elementi na razini bloka postavljeni ispod plutajućeg elementa, to je zato što plutajući element više nije dio ukupnog toka.
Ako pomno pogledate sliku, vidjet ćete da za razliku od blok elemenata, prilikom postavljanja inline elemenata ili običnog teksta koji se nalazi unutar blok elementa, uzimaju se u obzir granice plutajućeg elementa, pa se inline elementi i tekst teku oko njega.
Imajte na umu da se više plutajućih elemenata može postaviti u jedan red ako širina roditeljskog elementa to dopušta.
Napomena: Elementi apsolutne i fiksne pozicije zanemaruju svojstvo float.
Koristeći CSS svojstvo float, slika je napravljena da pluta na lijevoj strani. Tekst ispod slike u HTML kodu premotat će se oko slike s desne i donje strane.
Da biste stvorili prazan prostor između slike i teksta koji se omota oko nje, trebate dodati margine slici. Budući da je slika pomaknuta na lijevu ivicu nadređenog elementa, bit će dovoljno dodati margine samo s desne i donje strane kako bi se tekst malo odmaknuo od nje:
Img ( float: lijevo; margina: 0 10px 10px 0; ) Pokušajte »
Otkazivanje omota
Ponekad želite prikazati element na takav način da na njega ne utječu plutajuć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 vaša stranica ima visoku bočnu traku koja se nalazi na lijevoj strani web-stranice, podnožje se može podići i prikazati desno od nje. Na ovaj način, umjesto da bude položen na stranicu, sadržaj podnožja će se pojaviti u ravnini sa bočnom trakom. Ovaj problem je riješen pomoću svojstva clear, koje pregledniku govori da se stilizirani element ne smije omotati oko plutajućeg elementa.
Svojstvo clear CSS može se postaviti na jednu od sljedećih vrijednosti:
- lijevo - plutajući elementi su zabranjeni na lijevoj strani.
- desno - plutajući elementi su zabranjeni na desnoj strani.
- oba - plutajući elementi su zabranjeni s obje strane.
- none - Dopušta plutajuće elemente s obje strane.
Svojstvo clear je postavljeno da spriječi plutajuće elemente na desnoj strani. Tekst ispod slike neće se omotati oko slike s lijeve strane.
U ovom članku analizirat ćemo opcije kako napraviti premotavanje teksta oko slike. Ukupno postoji nekoliko načina. Razmotrimo svaki od njih. Za početak, savjetujem vam da pročitate html oznaku č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 - poravnanje na gornji redak teksta
- sredina - poravnanje prema osnovnoj liniji teksta
na primjer
tekstualni tekst text text text text
tekstualni tekst text text text text
Slika kao da se lijepi uz tekst, pa napravimo uvlake. A 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:
Evo kako će to izgledati na stranici:
Atribut hspace postavlja horizontalno uvlačenje u pikselima, vspace - odnosno okomito
Opcija 1.2. Preko CSS svojstva - padding i margina
Da biste to učinili, u atributima oznake dodajte dvije vrijednosti:
Evo kako će to izgledati na stranici:
Bolje izgleda zbog činjenice da nismo uvukli s lijeve strane. Umjesto margine, možete koristiti padding , učinak će biti sličan.
Korištenje svojstva float umjesto align
Osim svojstva align u atributima oznake stilovi imaju svojstvo float CSS, koje je također odgovorno za poravnanje. Sintaksa je sljedeća:
float :desno; // Desno poravnanje float :lijevo; // Lijevo poravnanje
Na primjer, ako napišete izlaz slike u prethodnom primjeru na sljedeći način:
To se prevodi u sljedeće.
Zadatak
Dodajte sliku na stranicu tako da se obavija oko susjednog teksta.
Riješenje
Omatanje teksta oko slike obično se koristi za kompaktno postavljanje materijala i povezivanje ilustracija i teksta zajedno. Samo omatanje se stvara korištenjem svojstva float stila dodanog IMG selektoru. Vrijednost lijevo poravnava sliku ulijevo, desno udesno. Protok se u ovom slučaju događa na drugim, slobodnim stranama.
Primjer 1 Omatanje slika
HTML5 CSS 2.1 IE Cr Op Sa Fx
Izvještaj poručnika Bokatueva
Jučer, tijekom izviđačke akcije, našu grupu je napao nepoznati neprijatelj u Alien kamuflaži. Kao rezultat učinkovite obrane i brzog protunapada, velika skupina militanata je slomljena i odbačena. Među osobljem nema žrtava. Borci izviđačke skupine pokazali su izvanredne vještine naoružanja. Zapovjednik voda Kudryashev M.A., koji je kompetentno koristio ljudske resurse svog voda, posebno se istaknuo u borbi. Kao rezultat operacije uhvaćeni su elementi vanzemaljske kulture, koji su prebačeni na analitički tim.
Priopćenje za javnost analitičke grupe
U našim tajnim laboratorijima, u okviru projekta Pandora, razvijeno je psihotropno oružje. Kao rezultat neuspješnog eksperimenta, većina znanstvenika koji su radili na uređaju bila je izložena psihotropnom zračenju, a oni su, u stanju strasti, razdvojili prototip. Možda su naši znanstvenici još uvijek u stanju strasti.
Rezultat ovog primjera prikazan je na sl. jedan.
Riža. 1. Tekst s ilustracijama
Korištenje svojstva float uzrokuje da se tekst čvrsto uklapa u sliku. Stoga je primjer uveo univerzalnu marginu svojstva koja dodaje uvlake između slike i teksta. Ovo svojstvo istovremeno postavlja uvlačenje s gornje, desne, donje i lijeve strane fotografije.
Posljednje ažuriranje: 21.04.2016
U pravilu se svi blokovi i elementi na web stranici u pregledniku pojavljuju onim redom 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 smislu dizajna.
Ovo svojstvo može imati jednu od sljedećih vrijednosti:
lijevo: element se pomiče ulijevo, a sav sadržaj ispod njega obavija se oko desnog ruba elementa
desno: element se pomiče udesno
none : poništava omatanje i vraća objekt u normalan položaj
Kada koristite svojstvo float na stiliziranim elementima koji nisu img element, preporuča se postaviti svojstvo širine.
Dakle, zamislimo da na stranici lijevo od glavnog teksta trebamo prikazati sliku, desno 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 sočnog, tamnog zelenila, bio je oduševljen, lagano se njišući na zrakama večernjeg sunca...
"Ne, život nije gotov u dobi od 31 godine", iznenada je odlučio princ Andrej, uvijek ...
U ovom slučaju dobivamo sekvencijalno postavljanje elemenata na stranici:
Sada, na istoj stranici, primijenite svojstvo float promjenom stilova na sljedeći način:
Slika ( float:left; /* float lijevo */ margin:10px; margin-top:0px; ) left:10px; font-size: 20px; float: desno; /* omotajte desno */ )
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.
Zabrana protoka. jasno svojstvo
Ponekad je potrebno onemogućiti protok. Sličan zadatak može biti relevantan ako se blok premota u novi red, a ne oko plutajućeg elementa. Na primjer, podnožje bi u pravilu trebalo biti strogo na dnu i protezati se cijelom širinom stranice. Ako se ispred podnožja nalazi plutajući element, onda podnožje može teći oko tog elementa, što nije poželjno.
Kako bi spriječio prelamanje elemenata, CSS koristi svojstvo clear, koje pregledniku govori da se na element koji se stilizira ne smije primijeniti prelamanje.
Svojstvo clear može imati sljedeće vrijednosti:
lijevo: stilizirani element može se omotati oko plutajućeg elementa s desne strane. Omatanje s lijeve strane ne radi.
desno: stilizirani element može se omotati samo oko plutajućeg elementa s lijeve strane. Omotavanje desne strane ne radi
oboje: stilizirani element može se omotati oko plutajućih elemenata i pomicati se prema dolje u odnosu na njih
none : stilizirani element ponaša se na standardni način, tj. sudjeluje u desnom i lijevom prelamanju
Na primjer, definirajmo podnožje na web stranici:
Prisutnost omatanja će stvoriti netočan prikaz u kojem se podnožje pomiče prema gore:
Promijenimo stil podnožja:
Podnožje (obrub-vrh: 1px solid #ccc; jasno: oboje; )
Sada se podnožje neće omotati oko slike, već će se spustiti.
