Sve o float imovini. Spriječite prelamanje na tri načina u CSS-u. Prikaz sekvence HTML elemenata

Tekst članka

#lijevo (
border-right: 5px solid #000;
float: lijevo;
visina: 400px;
širina: 200px;
}
#desno (
margin-left: 220px;
}
#desno img (
float: lijevo;
}

Šta je bio naš zadatak? Uradi 2 kolone: ​​lijeva kolona ima neki sadržaj, desna kolona ima članak. I ovaj članak ima sliku float: lijevo;(isto kao i lijevi blok). Zatim želimo da prikažemo blok sa informacijama o članku, naravno ne želimo da ove informacije budu desno od slike. Stoga dodajemo čisti blok. Međutim, ovdje nas čeka iznenađenje.

Ne samo da je otkazan float: lijevo; blizu slike, ali i pored lijevog bloka. Tako su informacije o članku otišle naniže, poravnavajući se s donjom ivicom lijevog bloka (pošto je viši). Kako riješiti ovaj problem? Vrlo jednostavno, samo blok #desno dodati imovinu overflow:

#desno (
margin-left: 220px;
overflow: skriveno;
}

Sada je sve sjelo na svoje mjesto. Nekretnina overflow odgovoran je za prikaz onoga što je izvan bloka. I skriveno navodi da će biti prikazano samo ono što je unutar bloka, a sve ostalo će biti skriveno. To je svojstvo i vrijednost koja nam omogućava da riješimo problem djelomično otkazivanje float-a u CSS-u.

Float je CSS svojstvo za pozicioniranje elemenata. Da biste razumjeli njegovu svrhu i porijeklo, možete se obratiti print dizajnu. U rasporedu štampe, slike se mogu postaviti na stranicu tako da tekst "teče" oko njih. Ovo se obično naziva "prematanje teksta".

U programima za raspored stranica, elementi sa tekstom mogu uzeti u obzir slike, ali i zanemariti ih. Ako se ignorišu, tekst će se pojaviti iznad slika kao da ih nema. Ovo je glavna razlika između toga da li su slike dio glavnog toka stranice ili ne. Web dizajn je vrlo sličan.

U web dizajnu, elementi stranice sa postavljenim svojstvima float ponašaju se baš kao slike u štampi kada tekst "teče" oko njih. Takvi elementi su dio glavnog toka web stranice. Međutim, stvari su drugačije ako elementi koriste apsolutno pozicioniranje. Apsolutno pozicionirani elementi se uklanjaju iz glavnog toka stranice, slično kao u gornjem primjeru gdje se u ispisu teksta zanemaruju slike. Takvi elementi ne utiču na položaj drugih elemenata, bez obzira da li se dodiruju ili ne.

Postavljanje svojstva float funkcionira ovako:

#sidebar (float: desno; )

Postoje ukupno 4 vrijednosti za svojstvo float. Lijevo i desno se koriste za odgovarajuće smjerove. Ništa (podrazumevano) - osigurava da element neće plutati. I naslijedite, što kaže da bi ponašanje trebalo biti isto kao i roditeljski element.

Za šta se može koristiti float?

Osim premotavanja teksta oko slika, float se može koristiti za kreiranje izgleda cijele stranice.

Svojstvo float je također korisno u manjem obimu. Na primjer, razmislite o malom području na stranici web stranice. Recimo da koristite float za svoj avatar, kada promijenite veličinu slike, veličina teksta će se prilagoditi tako da odgovara slici.

Isti raspored objekata može se postići upotrebom pozicioniranja. Objektu kontejnera se dodjeljuje relativno pozicioniranje, a objektu slike dodjeljuje se apsolutno pozicioniranje. U ovom slučaju, avatar neće uticati na poziciju teksta.

Onemogućavanje svojstva float

Za float, povezano svojstvo je jasno. Bilo koji element koji ima set svojstava clear neće biti prebačen na vrh kako se očekuje, već će se pojaviti ispod float elemenata. Možda će primjer na slici objasniti bolje od riječi.

U primjeru, bočna traka je pluta udesno (float: desno;), a njena visina je manja od područja glavnog sadržaja. Stoga će podnožje biti podignuto više jer ima dovoljno visine i to zahtijeva ponašanje plutanja. Da bi popravio situaciju, potrebno je postaviti svojstvo clear, koje osigurava da se element prikazuje ispod float elemenata.

#footer (jasno: oba; )

Svojstvo clear može imati četiri vrijednosti. Oba, najčešće korištena, koriste se za poništavanje plutanja u svakom smjeru. Lijevo i desno - koriste se za poništavanje plutanja jednog od smjerova. Ništa - podrazumevano, obično se ne koristi osim ako nije potrebno brisanje. inherit bi bila peta vrijednost, ali začudo nije podržana u Internet Exploreru. Otkazivanje samo lijevog ili desnog float-a je mnogo rjeđe, ali svakako ima svoju svrhu.

Great Collapse

Još jedna nevjerovatna stvar u vezi sa svojstvom float je da njegova upotreba može utjecati na roditeljski element. Ako takav element sadrži samo float elemente, onda se doslovno urušava, odnosno njegova visina je nula. Ovo nije uvijek primjetno osim ako roditeljski element nema neku vrstu vidljive pozadine.

Ovaj kolaps se čini nelogičnim, ali alternativa je još gora. Razmotrite ovaj primjer:

Ako se blok element na vrhu automatski proširi kako bi primio sve plutajuće elemente, na kraju ćemo imati neprirodnu prazninu u tekstu između pasusa, bez načina da to popravimo. Da je to slučaj, naši dizajneri bi se mnogo češće žalili na ovakvo ponašanje nego na urušavanje.

Stoga je sažimanje gotovo uvijek neophodno kako bi se spriječile poteškoće u rasporedu. Da biste promijenili ovo ponašanje, morate dodati element koji poništava float nakon plutajućih elemenata, ali prije zatvaranja nadređenog elementa.

Načini za otkazivanje float-a

Ako znate da će se nakon float elemenata uvijek prikazivati ​​neki drugi element (na primjer, podnožje), tada samo trebate podesiti svojstvo clear: oba; , kao u gornjem primjeru, i nastavite raditi svoje. Ovo je idealno jer ne zahtijeva nikakve hakove ili dodatne elemente. Naravno, nije sve u našem životu tako glatko i postoje trenuci kada ova metoda nije dovoljna. Stoga je potrebno u svom arsenalu imati nekoliko dodatnih metoda.

• Empty div metoda. Koristi se doslovno prazan div.
  . Ponekad se element može koristiti umjesto njega
  ili bilo šta, ali div se najčešće koristi jer po defaultu nema stil, nikakvu posebnu svrhu i malo je vjerovatno da će imati opći stil primijenjen na njega preko CSS-a. Ljubitelji semantički čistog označavanja možda neće voljeti ovu metodu, jer prisustvo praznog div nema kontekstualno značenje i postavlja se na stranicu samo iz razloga dizajna. Naravno, strogo govoreći, u pravu su, ali on radi svoj posao i nikome ne nanosi štetu.
• Prelivna metoda. Zasnovano na činjenici da roditeljski element treba postaviti svojstvo overflow. Ako je ovo svojstvo postavljeno na auto ili hidden, roditeljski element će se proširiti da sadrži sve float elemente. Ova metoda izgleda semantički ispravnija jer ne zahtijeva dodatne elemente. Međutim, ako biste koristili drugi div samo da biste koristili ovaj pristup (što znači roditeljski div), onda bi to bilo isto kao u prethodnom primjeru s dodavanjem praznog diva. Također, zapamtite da svojstvo overflow ima drugačiju svrhu. Budite oprezni i ne dozvolite da dio vašeg sadržaja nestane ili da se pojave nepotrebne trake za pomicanje.
• Jednostavna metoda čišćenja. Ova metoda koristi prekrasan CSS pseudo selektor :after. Mnogo bolje od korištenja overflow na roditeljskom elementu. Jednostavno mu date dodatnu klasu, deklariranu ovako: .clearfix:after ( sadržaj: "."; vidljivost: skriveno; prikaz: blok; visina: 0; clear: oba; ) Ova metoda dodaje nevidljivi sadržaj i poništava float I usput, ovo nije cijela priča o tome kako treba koristiti dodatni kod u starijim pretraživačima.

I, kao što razumijete, svaka metoda se koristi u različitim situacijama. Uzmimo, na primjer, mrežu blok elemenata različitih tipova.

Za bolju vizualnu prezentaciju, bilo bi lijepo kombinirati slične blokove. Na primjer, želimo da svaki tip počinje u novom redu, u našem slučaju tip elementa je određen bojom. Možemo koristiti metod prelivanja ili "jednostavnu metodu brisanja" ako svaka grupa ima svoj vlastiti element kontejnera. Ili možemo koristiti praznu div metodu između svake grupe. Na vama su tri elementa kontejnera ili tri prazna diva, što je bolje za vaš zadatak.

Problemi sa plovcima

Ljudi često pokušavaju zaobići Floats jer s njima treba raditi vrlo pažljivo. Većina grešaka dolazi sa IE6. Kako sve više i više web dizajnera prestaje podržavati IE6, možda nećete biti zabrinuti zbog ovih problema. Ali za one kojima je stalo, evo kratke liste.

Alternative za plutanje

Ako vam je potreban tekst za premotavanje slike, nema alternative. Ali za izgled stranice, definitivno postoje izbori. Postoje neki vrlo zanimljivi pristupi koji kombinuju fleksibilnost plutanja sa snagom apsolutnog pozicioniranja. CSS3 ima nešto što se zove Modul rasporeda predložaka, koji će u budućnosti pružiti dostojnu alternativu za plutanje.

Vlad Merzhevich

Plutajućim elementima ćemo zvati one elemente koji se kreću oko drugih objekata web stranice, na primjer, tekst. Ispravnije bi bilo reći „pokrenuti elementi“, ali s druge strane, termin „plutajući element“ je odavno usvojen, 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 i drugih zadataka:

• premotavanje teksta oko slika;
• kreiranje bočnih traka;
• horizontalni meniji;
• kolone.

Prelamanje se događa korištenjem svojstva float style sa vrijednošću lijevo ili desno. Po defaultu, prelamanje elemenata nije postavljeno, ali ako iz nekog razloga ovo mora biti eksplicitno specificirano, vrijednost bi trebala biti postavljena na none. Na sl. Slika 3.32 prikazuje rezultat primjene različitih vrijednosti na sliku pored teksta.

Rice. 3.32. Omotavanje teksta oko slike

Sam HTML kod ostaje gotovo 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 vrijednošću lijevo oznaci . Ova vrijednost poravnava element s lijevom ivicom njegovog roditelja ili drugog plutajućeg elementa, a svi ostali elementi, poput teksta, lebde na desnoj strani. Vrijednost desno, s druge strane, poravnava element s desnom ivicom njegovog roditelja ili drugog plutajućeg elementa, a svi ostali elementi, kao što je tekst, ga okružuju lijevo.

Dakle, sredili smo terminologiju. Dodamo primjeru 3.21 kako bi se crtež bolje uskladio s tekstom. Najvažnije je postaviti uvlačenje desno od slike i za svaki slučaj ispod. Da biste to učinili, idite na oznaku dodaje se klasa nazvana fig, koja ima postavljeno svojstvo margine i istovremeno određuje svoju marginu na svakoj strani slike (primjer 3.22).

Primjer 3.22. Omotajte 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 ujutru, jer je tada doručak već odavno završio, a ručak još nije počeo. I, naravno, bio je užasno sretan kada je vidio da Zec vadi šolje i tanjire.

Rezultat primjera prikazan je na sl. 3.33.

Rice. 3.33. Slika koja je poravnata lijevo, umotana udesno

Kreiranje okvira

Bočna traka je blok sa slikama i tekstom koji je ugrađen u glavni tekst. Bočna traka se obično nalazi na lijevoj ili desnoj ivici tekstualnog bloka, a glavni tekst teče oko nje na drugim stranama (slika 3.34).

Rice. 3.34. Vrsta umetka

Kako bi se bočna traka istakla u tekstu, obično se postavlja na boju pozadine i dodaje se ivica. Okviri svojim izgledom podsećaju na gornji način premotavanja teksta oko slike, tako da je kod za kreiranje okvira skoro identičan prethodnom (primer 3.23).

Primjer 3.23. Dodavanje okvira

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Alat Magic Erase briše piksele slične boje. Ako radimo na pozadinskom sloju ili sloju koji ima zaključanu transparentnost, 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 za kreiranje glatkih granica, poništavamo opciju Contiguous da istovremeno uklonimo cijelu pozadinu, 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.

Horizontalni raspored slojeva

Po defaultu, blok elementi su poređani okomito jedan ispod drugog, ali pomoću svojstva float možete ih natjerati da se poredaju vodoravno jedan pored drugog. U tom slučaju morate postaviti širinu slojeva i postaviti float za njih. Ako širina nije navedena, ona će biti jednaka sadržaju sloja, uzimajući u obzir margine i ivice. Primjer 3.24 uzima katalog proizvoda kreiran u prethodnom odjeljku koristeći elemente inline-bloka i prerađuje ga tako da koristi float . Da bi blokovi bili vidljivi, pozadina web stranice je postavljena na sivu.

Primjer 3.24. Blokovi horizontalno

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultat primjera prikazan je na sl. 3.35.

Rice. 3.35. Postavljanje sloja kada koristite svojstvo float

Zbog različitog teksta u potpisu, visina blokova se također ispostavlja različitom, zbog čega se neki blokovi "prilijepe" za druge i ne prelaze u drugu liniju. Postavljanje visine svih blokova putem svojstva visine, kao što je 100px, ili vraćanje na korištenje display : inline-block može pomoći ovdje.

Efekat protoka

Svojstvo float, pored mogućnosti kreiranja plutajućih elemenata, ima niz karakteristika o kojima morate znati. Glavna karakteristika je da plutanje utiče na sve obližnje elemente, prisiljavajući ih da učestvuju u toku. Pogledajmo ovo u primjeru 3.25, koji pokazuje kako kreirati strelice na jednoj liniji koristeći lijevu i desnu vrijednost svojstva float.

Primjer 3.25. Efekat protoka

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Iako tekst i strelice koriste različite blok elemente i treba ih postaviti na različite linije, efekat float-a uzrokuje da se tekst podiže više kako pada unutar zone toka (slika 3.36). Takođe, boja pozadine sloja sa strelicom se ne prikazuje zbog činjenice da plutajući elementi ne učestvuju u toku dokumenta, u suštini, to je isto kao da sloj sa strelicom ostavite praznim.

Rice. 3.36. Učinak premotavanja na osnovni tekst

Plutajući elementi ne utiču na visinu bloka u kojem se nalaze. Da biste to otkrili, samo okružite blok okvirom i postavite plutajući element s 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 za postizanje željenog rezultata je otkazivanje omota u pravom trenutku. Postoji nekoliko načina da to učinite.

Cancel Wrap

Wrapping je moćan alat za raspored koji se koristi za poravnavanje i organiziranje elemenata. Međutim, da bi se ovaj alat držao pod kontrolom, potrebna je protuteža, bez koje se ogroman potencijal plovka svodi na nekoliko uskih zadataka. Govorimo o ukidanju toka različitim metodama. Nabrojimo četiri najpopularnije.

Širina elementa

Ako plutajući element zauzme cijelu dostupnu širinu, tada će preostali elementi nakon njega započeti u novom redu. Da biste to učinili, morate omogućiti svojstvo širine sa vrijednošću od 100%. Stoga se stil u primjeru 3.25 može dopuniti na sljedeći način:

Lijevo ( float: lijevo; širina: 50%; ) .desno ( float: desno; širina: 50%; poravnanje teksta: desno; )

Svaki sloj sa strelicom sada zauzima 50% širine i oni dodaju do 100% širine, tako da će pasus koji slijedi nakon sloja strelice početi na novom redu.

Ova metoda se rijetko koristi jer se širina ne može primijeniti na slike i ne rješava problem visine sloja i pozadine.

Korištenje overflow

Svojstvo overflow kontrolira prikaz sadržaja elementa bloka ako se cijeli sadržaj ne uklapa i proteže se izvan područja navedenih dimenzija. Automatska vrijednost posebno dodaje trake za pomicanje kada je to potrebno, dok hidden prikazuje samo područje unutar elementa, a skriva ostatak. Osim toga, korištenje overflow sa vrijednošću auto, scroll ili hidden nadjačat će učinak float. Stil na primjer 3.25 je upotpunjen samo jednom linijom:

Strelica (preljev: skriveno;)

Rezultat se odmah mijenja nakon primjene svojstva overflow (slika 3.38).

Rice. 3.38. Utjecaj svojstva prelijevanja na pozadinu

Primjer 3.26 je na sličan način dopunjen:

DIV (prelijevanje: skriveno; )

Rezultat je prikazan na sl. 3.39.

Rice. 3.39. Učinak svojstva prelijevanja na granicu

overflow je jedno od najpopularnijih svojstava koje radi u sprezi sa float-om. Ali ponekad se javljaju situacije kada je upotreba ove metode neprihvatljiva. Ovo se dešava u slučajevima kada se element proteže izvan granica elementa, u kom slučaju će biti "odsječen". U primjeru 3.27, slika je pomjerena lijevo od prvobitne pozicije.

Primjer 3.27. Izrežite područje elementa

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Winnie the Pooh u posjeti zecu

Rezultat primjera prikazan je na sl. 3.40.

Rice. 3.40. Izrezivanje slike

U IE6, metoda radi samo kada je postavljeno svojstvo hasLayout. Da biste to omogućili, možete dodati zumiranje : 1 zajedno sa svojstvom prelivanja.

čista imovina

Da biste poništili učinak float-a, koristite svojstvo clear sa sljedećim vrijednostima.

• lijevo - poništava prelamanje s 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 tok na desnoj strani elementa (float : desno).
• oba - poništava tok elementa sa desne i lijeve ivice istovremeno. Preporučljivo je postaviti ovu vrijednost kada želite da poništite prelamanje elementa, ali ne znate tačno s koje strane.

Da biste poništili efekat premotavanja, svojstvo clear mora biti dodato elementu koji dolazi nakon floated. Obično uvedete univerzalnu klasu, na primjer, clear i ubacite praznu oznaku

sa ovom klasom (Primjer 3.28).

Primjer 3.28. Korištenje clear

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

←

→

U ovom primjeru, clear klasa ima svojstvo clear postavljeno na oba . Ako trebate koristiti različite vrijednosti, možete unijeti nekoliko 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 događa kada kod naiđe na nekoliko različitih plutajućih vrijednosti u isto vrijeme. Dakle, u primjeru 3.29, float se koristi za kreiranje 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

Katedrala Svete Sofije

Poljska crkva

Nova linija

Podrum

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 imaju float set. Dakle, “Nova linija” ne počinje odmah nakon fotografija, već nakon završetka lijeve kolone.

Rice. 3.41. Greška pri prikazivanju niza

U takvim situacijama pomaže kombinacija različitih metoda. Dakle, fotografije se mogu dodati u kontejner sa uklonjenim prelivom i clearleft. Kolona će imati sljedeći oblik.

Katedrala Svete Sofije

Poljska crkva

Nova linija

Pseudo-element:nakon

Često uključivanje prazne oznake

sa jasnim svojstvom zatrpava kod, posebno kada se aktivno koristi svojstvo float. Logično je sve premjestiti u stilove, riješiti se nepotrebnih oznaka. Da bismo to učinili, koristit ćemo pseudoelement :after, koji u kombinaciji sa svojstvom content dodaje tekst iza elementa. Na takav tekst možete primijeniti svojstva stila, posebno clear . Ostaje samo sakriti prikazani tekst iz pretraživača.

Clearleft:after ( sadržaj: "."; /* Prikaži tekst nakon elementa (tačka) */ clear: left; /* Otkaži prelamanje */ vidljivost: skriveno; /* Sakrij tekst */ display: block; / * Blok element * / visina: 0 /* Visina */ )

Nije važno koji znak prikazati u svakom slučaju, on je skriven od korisnika kroz vidljivost, ali čak i kada je skriven, tekst zauzima određenu visinu i utiče na obližnje elemente. Stoga, izlazni tekst još uvijek treba pretvoriti u blok element i postaviti na nultu visinu.

Budući da tekst generiran pseudoelementom :after dolazi iza elementa, on lako zamjenjuje konstrukciju

. Tamo gdje je to potrebno, trebate samo dodati klasu clearleft, kao što je prikazano u primjeru 3.30.

Primjer 3.30. Pseudo-element:nakon

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Winnie the Pooh u posjeti zecu

IE pretraživač ne podržava :nakon i uključujući verziju 7.0, tako da gornji primjer neće raditi u ovim verzijama. Dodavanje zuma : 1 lebdećem elementu poništava umotavanje u IE.

Pogodnost gornje metode leži u korištenju klase clearleft, koja se može dodati bilo kojoj oznaci ako je potrebno. Također možete uvesti dodatne klase, čiji će se stil razlikovati od drugih jasnih vrijednosti.

Kada se pravilno koristi, float se pretvara u moćan alat za raspored koji se koristi za poravnavanje i organiziranje elemenata. Međutim, da bi se ovaj alat držao pod kontrolom, potrebna je protuteža, bez koje se ogroman potencijal plovka svodi na nekoliko uskih zadataka. Govorimo o ukidanju toka različitim metodama. Nabrojimo nekoliko najpopularnijih.

Širina elemenata

Ako lebdeći elementi zauzimaju čitavu dostupnu širinu, tada će preostali elementi koji slijede krenuti u novom redu. Da biste to učinili, ukupna širina elemenata mora biti 100%. Primjer 1 pokazuje kako kreirati strelice na jednoj liniji.

Primjer 1: Korištenje širine

←

→

Svaki blok sa strelicom sada zauzima 50% širine i oni dodaju do 100% širine, tako da paragraf iza strelice počinje na novom redu.

Ova metoda se rijetko koristi, jer nije uvijek moguće eksplicitno odrediti širinu elemenata, a metoda ne rješava problem s visinom bloka i njegovom pozadinom (slika 1).

Rice. 1. Nema popunjavanja pozadine

Korištenje overflow

Plovak za čišćenje 2

Kreirajte web stranicu kao što je prikazano na sl. 1. Za označavanje rublje koristite simbol ₽.

Pokaži odgovor

Vaša narudžba

Proizvod

Cijena

Majica

599 RUR

Shorts

299 ₽

Ukupno

898 RUR