Horizontalno pomicanje css. Pomicanje div

Pogledajmo kako CSS pravilo prelivanja (koristeći svoje skrivene, vidljive, pomicanje i automatske vrijednosti) može manipulirati sadržajem ako se ne uklapa u svoju dodijeljenu oblast.

U praksi (tokom layout-a ili uređivanja) često se susreću takve situacije, pa će mnogima biti od koristi. Štaviše, usput ćemo se dotaknuti varijacija ove imovine overflow-x i overflow-y, koji su poseban slučaj i imaju svoje specifičnosti. Dotakćemo se i susednog pravila prelivanja teksta, koje određuje vidljivost teksta u bloku koji prelazi granice elementa.

Naravno, u mnogim slučajevima ne možete bez navođenja specifičnih dimenzija područja kroz širinu i visinu (širina i visina kutije) koje može potrajati. Općenito, u nastavku ćemo razmotriti primjere efekta svojstva overflow na sve moguće načine.

Prelijevanje (vidljivo, skriveno) - vidljivi ili skriveni sadržaj bloka koji prelazi njegove granice

Prvo, slijedeći tradiciju, da vidimo koje su vrijednosti na snazi ​​u tabeli specifikacija Međunarodnog konzorcija W3C (podaci su predstavljeni prema verziji CSS2.1, iako su validni i podržani u više nova verzija CSS3):

Kao što vidite, overflow ima 4 glavna parametra (vidljivi, skriveni, automatski, skrolovanje) i naslijediti vrijednost, koje možete napisati ako želite da dodijelite, ali se po defaultu ovo pravilo ne nasljeđuje ( naslijeđeno: ne na snimku ekrana). Zadana vrijednost je visibl (početna: vidljiva).

Prije nego što nastavite sa istraživanjem sa praktični primjeri, hajde da dobijemo neke detalje za sebe. Kao što je gore pomenuto, pravilo prelivanja vam omogućava da kontrolišete sadržaj blok element u slučajevima kada se ne uklapa u njega. Ovo direktno proizilazi iz imena ovoga CSS pravila(prelijevanje na engleskom znači prelijevanje, višak.)

Prethodno se možete upoznati od čega se sastoji klikom na dostavljenu vezu. Osim toga, bit će korisno pregledati materijal koji daje karakteristike blokova stranica.

Uzmimo DIV kontejner kao primjer (detaljnije o divovima kao osnovi blok raspored), obojite ga pozadinom, kroz atribut style, i postavite ga unutra proizvoljan tekst:

Konačni rezultat će biti otprilike ovako:

Nismo definirali širinu kontejnera. U ovom slučaju, ako se sjećate, blok element zauzima sav raspoloživi prostor u širini. Ali visina (visina) bloka, ako nije navedena, određena je sadržajem (u našem primjeru, tekstom koji je tamo prisutan).

Pravilo prelijevanja za blokove koji sadrže sadržaj koji se ne može distribuirati po visini

Iznad sam predložio primjer gdje blok element sadrži tekst koji se može preraspodijeliti kada je širina ograničena (promjenom preloma riječi). Ovo je sada posebno istinito prilikom prijave responsive design za gledanje na mobilnim telefonima. Međutim, dešava se da sadržaj, iz ovog ili onog razloga, nije toliko fleksibilan.

Počnimo s istim uvjetima kao u primjeru koji smo gore raspravljali. Zapamtite, kada ste odredili fiksnu širinu bloka, sadržaj je redistribuiran tako da ne prelazi horizontalnu granicu, ali je istovremeno povećana visina kontejnera (zajedno sa sadržajem) okomito. Sada promijenimo sadržaj i zamijenimo standardni tekst dugim riječima bez razmaka, navodeći širinu:

Primijetite da je sadržaj sada odmah premašio horizontalnu granicu kada je ograničen na širinu. A ako napišemo overflow hidden, tada ćemo odrezati sadržaj:

Dodavanje pomicanja sa pomicanjem i automatskim parametrima pravila prelijevanja

Pogledajmo sada slučaj da li su širina i visina kontejnera fiksne, ali je poželjno ostaviti sadržaj koji ne stane u njega dostupan. Uzmimo isti primjer c fiksna širina i visina, samo vrijednost visine radi jasnoće ćemo naznačiti u 60px, dodajući prelivanje: skrolovanje na CSS stilove:

Kao rezultat toga, trake za pomicanje pojavile su se okomito i vodoravno:

Tako sadržaj postaje dostupan, iako uz pomoć skrolovanja. Međutim, imajte na umu da ne samo vertikalno skrolovanje, koji je potreban za potpuni pregled, ali i horizontalni, koji nije aktivan. Ovo je karakteristika vrijednosti pomicanja.

Želim napomenuti da osnovno pravilo stila ima varijacije u obliku overflow-x i overflow-y, koje uzimaju iste vrijednosti (vidljivo, skriveno, pomicanje, auto) kao i osnovni overflow, samo postaviti parametre primijeniti na sadržaj kutija horizontalno (x) i vertikalno (y).

CSS pravilo prelivanja teksta (isječak, trotočka)

Sada hajde da se upoznamo sa modifikacijom gore opisanog svojstva overflow, koje se pojavilo samo u CSS3. Informacije o njemu možete dobiti na odgovarajućoj službenoj stranici (redakcijski nacrt konzorcijuma W3C):

Nekretnina text-overflow ima 2 glavna značenja (isječak i elipsa). Ima efekta samo ako je specificirano prelijevanje, koje ima vrijednost koja nije vidljiva. A ovo je, kao što se sjećate, zadani parametar, tako da stilovi za odgovarajući element moraju imati prelijevanje sa skrivenim, pomicanjem ili automatskim.

Isječak je zadana vrijednost i samo isječe tekst. Stoga omogućavamo prelijevanje teksta za naš DIV sa odgovarajućim CSS svojstvima dodavanjem razmaka: nowrap (da spriječimo prelamanje riječi):

Kao što možete vidjeti ellipsis vam omogućava da dodate elipse umjesto isječenog teksta, nagoveštavajući njegov nastavak. Da dam logičan zaključak ovaj primjer, možete dodati: hover pseudo-klasu za div, koja mijenja stil elementa kada zadržite pokazivač iznad njega:

Klasa1: lebdenje (preljev: vidljivo; razmak: normalno;)

Sada će tekst biti odsječen, ali ako pomaknete kursor miša preko njega, pojavit će se u cijelosti... Ovo možete provjeriti klikom na ponuđeni link.

3. Forsirajte vertikalno i horizontalno pomicanje u CSS bloku
4. Primjer za pomicanje div bloka

U ovom članku ćemo analizirati pitanje kreiranja bloka (div) fiksne veličine s mogućnošću vodoravnog i okomitog pomicanja. Ovo se može implementirati koristeći CSS... Odgovoran za ovo overflow property.

O prelivu korisnog svojstva

Nekretnina overflow odgovoran je za prikaz sadržaja blok elementa. Može se koristiti kada se sadržaj ne uklapa u potpunosti i prelazi područje bloka.

overflow-x- odgovoran je za horizontalno prikazivanje sadržaja blok elementa.
overflow-y- odgovoran je za vertikalno prikazivanje sadržaja blok elementa.

CSS kod

Prokrutka (
preliv: auto; / * svojstvo za vodoravno pomicanje. Automat ako je sadržaj veći od bloka * /
}

Overflow svojstva i vrijednosti

vidljivo- prikazuje cjelokupni sadržaj elementa, čak i izvan navedene širine.
skriveno- prikazuje se samo područje unutar elementa, ostalo je skriveno.
skrolujte- nasilno dodana horizontalna (y) ili horizontalna (x) traka za pomicanje.
auto- automatski dodano horizontalna traka skrolovanje ako je blok manji.

Razmotrite primjer CSS klase. U širini i visini postavljamo željenu širinu i visinu bloka (sadržaj bloka neće ići dalje od njih), a sa svojstvom overflow: auto; postavite horizontalno pomicanje ako je potrebno

CSS kod

Prokrutka (
širina: 150px; / * širina našeg bloka * /
visina: 100px; / * visina našeg bloka * /


preliv: auto; / * svojstvo za vodoravno pomicanje. Automat ako ima više blokova * /
}

Prisilno pomicanje u CSS bloku

Također možete prisilno pomicati po visini i širini. Da biste to učinili, svaka os: overflow-y: pomicanje; (vertikalno) overflow-x: skrol; (horizontalno) specificiramo parametar pomicanja, prisilno pomicanje.

HTML i CSS kod

Prokrutka (
visina: 150px; / * visina našeg bloka * /
pozadina: #fff; / * boja pozadine, bijela * /
granica: 1px čvrsta # C1C1C1; / * veličina i boja ivice bloka * /


}

Primjer za pomicanje div bloka

HTML i CSS kod

Jedna od nekretnina overflow može se ukloniti, tada će biti skrolovanja samo duž jedne ose, što je sasvim dovoljno.
Pogledajte rad skripte Na primjer ispod.

Instrukcije

Koristite oznaku div ako želite traku za pomicanje ne za cijelu stranicu, već samo za ograničeno područje. V HTML jezik(HyperText Markup Language - "Hypertext Markup Language") "Oznake" se odnose na pojedinačne komande za pretraživač da prikaže određeni element stranice. U samom jednostavan oblik div oznaka (često se naziva "sloj") ovako:

Evo - zatvaranje. Sve što se nalazi između otvaranja i zatvaranja taga je u sloju kao u kontejneru i ovaj kontejner se može dimenzionisati - širina i visina. Ovo je urađeno sa dodatni parametar("Atribut") stil koji slijedi početnu oznaku: