Primjeri blok rasporeda html stranica. Blokiraj CSS izgled. Posebnosti rasporeda tablice

Izgled web stranice izvodi se pomoću dvije glavne metode: tablične i blokovske div rasporedi. Block layout je funkcionalniji i pruža više mogućnosti zahvaljujući upotrebi CSS-a.

Kako blok radi?

Za izvođenje ove vrste izgleda koriste se dvije datoteke ( index.html i style.css) koji sadrži kod HTML i stil web stranice u skladu s tim.

U prvoj datoteci oni su izravno napisani div-kontejneri, koji su svojevrsni temelj za raspored, a drugi opisuje stilske značajke i položaj našeg div-kontejneri.

Da biste vidjeli rezultat izvršenih manipulacija u stvarnom vremenu, morate unijeti u adresnu traku svog preglednika: http://URL/test.

Osnove izgleda

Raspored u dva stupca koji ćemo pokušati stvoriti može se prikazati ovako:

Svi elementi našeg layout-a moraju biti postavljeni u jedan zajednički kako bismo mogli postaviti parametre za cijeli layout kao cjelinu. Sadržaj zajedničkog spremnika bit će div-s koji čine zasebne blokove. Pomoću CSS možemo prilagoditi sljedeće parametre: veličinu, poziciju na stranici, stilove i boju.

Blokiraj izgled web stranice

Svaki element izgleda mora biti smješten u poseban "spremnik" pomoću oznake div. U datoteci CSS potrebno je dodati svojstva elementa, definirajući parametre izgleda i smještaja elemenata (širina, visina, font, veličina i tako dalje).

Kako se ne biste zabunili, trebate unijeti naziv ovog bloka u svaki spremnik, izgledat će ovako:

"http://www.w3.org/TR/html4/loose.dtd">

Izgled bloka - uzeti 2

Policajac

Lijevi stupac

Sadržaj stranice

Podrum

Nakon dovršetka manipulacija, morate otvoriti datoteku Stil.css i opišite stilove za te spremnike. Prije svega, potrebno je opisati stilove za glavne oznake Tijelo i HTML, uklanjajući margine stranica kako bi se osigurala kompatibilnost s više preglednika:

tijelo, html (
margina:0px;
padding:0px;
}

tijelo, html (
margina:0px;
padding:0px;
}
#napraviti (
širina:800px;
margina:0 auto;
}
#Zaglavlje(
boja pozadine:#C0C000;
}
#lijevo(
boja pozadine:#00C0C0;
širina:200px;
float:lijevo;
}
#sadržaj(
boja pozadine:#8080FF;
margin-left:202px;
}
#podnožje(
boja pozadine:#FFC0FF;
}

Da biste dobili detaljniju majstorsku klasu o tome kako dizajnirati web stranicu na temelju div, možete pogledati sljedeće videozapise:

https://www.youtube.com/watch?v=omyeH5h1lqA
https://www.youtube.com/watch?v=SQ7cWIy63yI

Svrha lekcije: Uvod u CSS raspored temeljen na blokovima. Stjecanje vještina korištenja blok-baziranog izgleda web stranice

Kada radite sa slojevima ili, drugim riječima, blokovima i div elementima, glavni teret pada na CSS, jer Bez svojstava, slojevi su praktički ništa.
Nažalost, još uvijek postoji problem kompatibilnosti s više preglednika pri radu s blokovima. Oni. ista svojstva daju različite rezultate u različitim preglednicima. Za borbu protiv takvih problema postoje takozvani hakovi. Hack- ovo je skup tehnika kada se pojedinačni preglednici opskrbljuju kodom koji razumije samo ovaj preglednik, a zanemaruju ga drugi.

Posebnosti rasporeda tablice

Recimo da trebate izraditi predložak stranice sa zaglavljem, podnožjem i dva stupca.
Razlike:

Fiksni dizajn ili
kruti blok raspored (dva stupca)

Fiksni izgled uključuje korištenje slojeva zadane širine, koja je određena razlučivošću korisničkog monitora.
Budući da je najpopularnija razlučivost monitora među korisnicima mreže 1024×768, preporučljivo je usredotočiti se na nju. Ukupna širina blokova u ovom slučaju je 900–1000 piksela (mali dio piksela potreban je za trake za pomicanje i obrube prozora preglednika).
Glavni blok sa sadržajem postavljen je u središte, onda "slobodne" margine oko rubova izgledaju dobro čak i s visokom rezolucijom monitora.

Sl. 1. Primjer fiksnog dizajna

Ukupnu širinu može odabrati dizajner, što se zove "po oku", ili nakon prikupljanja dodatnih informacija.

Primjer: izradite fiksni dizajn web stranice na temelju gornje slike

Izvođenje:

Sve glavne elemente stranice "podijelili smo" u blokove na sljedeći način:
- blok 1— prvi sloj (id="shapka"),
- blok 2 i 3 nalaze se u jednom bloku (id="container"),
- blok 2— sloj s izbornikom (id="menu"),
- blok 3— sloj sa sadržajem (id="sadržaj"),
- blok 4— sloj s id="bottom" .

Shematski ćemo prikazati raspored blokova:

1. Postavite svojstva "zaglavlja" (blok 1)

Odaberemo ukupnu širinu slojeva "na oko" - 750 piksela.

margin-desno: auto; margin-lijevo: auto;

ili postavite visinu pomoću uvlake

Na primjer:

padding-top : 15px ; padding-bottom : 15px ;

padding-top: 15px; padding-bottom: 15px;

Sav kod za zaglavlje:

#shapka( text-align: left; /* Poravnaj unutarnji sadržaj ulijevo */ width: 750px; /* Širina bloka i ukupna širina */ pozadina: #900000; /* Boja pozadine */ visina: 50px; /* Visina blok */ margin-desno: auto; /* Automatsko uvlačenje desno */ margin-left: auto /* Automatsko uvlačenje lijevo */ padding: 10px )

2. Stvorite svojstva spremnika

Postavite širinu spremnika: trebala bi biti 750px + 20px (ukupna širina izgleda + ispuna u ukupnoj širini izgleda). Oni. spremnik nema ispunu, pa mu povećajte širinu za 10 piksela s lijeve i 10 piksela s desne strane
Ako izgled mora stati na lijevu stranu zaslona, preglednik će to učiniti automatski. U našem slučaju, centrirat ćemo blok spremnika

#container ( width: 770px; /* Širina sloja ili (širina izgleda+20) */ margin-desno: auto; /* Automatsko uvlačenje desno */ margin-left: auto; /* Automatsko uvlačenje lijevo */ )

3. Kreirajte svojstva za blok 2 - izbornik

Sloj broj 2 širine 200 piksela (širina)
Za isti sloj (izbornik) postavljamo tijek oko susjednog bloka, tj. svojstvo float: lijevo
Postavljamo unutarnje margine tako da se tekst ne "lijepi" za rub sloja (svojstvo padding)
Postavite boju teksta i pozadine (background , color)

#menu ( širina: 200px; /* Širina sloja */ float: lijevo; boja: bijela; /* Boja teksta */ pozadina: #008080; /* Boja pozadine */ padding: 10px; /* Unutarnje margine oko sadržaja */ )

4. Kreirajte svojstva za blok 3 - sadržaj

Postavite širinu sloja u omjeru 770px - 200px = 570px, Ali! Budući da smo postavili ispunu u oba bloka 2 i 3, moramo oduzeti još 40 piksela: 20 za ispunu bloka izbornika i 20 za ispunu bloka sadržaja. Neka širina sloja bude 770px - 200px - 40px = 530px
Postavili smo omot na float: left , isključujući grešku u pregledniku Internet Explorer: ako ne postavite svojstvo, postojat će razmak između slojeva. Nadalje, ako ne postavite ovo svojstvo, blok će se pojaviti iza bloka izbornika, a samo će njegov sadržaj (tekst) teći oko bloka izbornika s desne strane.
Postavite boju pozadine (background) i unutarnje margine (padding)

#content ( /* Desni stupac */ širina: 550px; /* Širina sloja */ float: lijevo; /* Prelomi sa susjednim slojem */ padding: 10px; /* Unutarnje margine oko sadržaja */ pozadina: #e0e0e0; /* Boja pozadine */ )

5. Kreirajte svojstva za blok 4 - “podrum”

Postavite širinu sloja na 750 piksela
Za ovaj blok trebate ukloniti omot, tj. postavite svojstvo clear
Postavljanje unutarnjih margina za ispunu
Postavite boju za pozadinu (background) i tekst (color)
Centrirajte blok (margina-desno i margina-lijevo)

#bottom( width:750px; /* Širina sloja */ clear:left; /* vrati blokiranje i postavi sloj s lijeve strane */ padding: 10px; /* Unutarnje margine oko sadržaja */ background:#444; /* pozadina */ boja :#fff; /* margina-desno: auto; /* auto-uvlaka lijevo: auto;

Konačni kod: sve zajedno

Proizlaziti:

sl.2. Kruti raspored blokova s dva stupca

Fiksni dizajn za tri stupca

Uz fiksni dizajn za raspored s tri stupca, postoje dva glavna pristupa konstruiranju modularne mreže:

Korištenje svojstva za postavljanje stupaca jedan pored drugog.
Korištenje skupa onih CSS svojstava koja su namijenjena za pozicioniranje slojeva.

Razmotrimo prvi slučaj.

Korištenje svojstva float za izgled s tri stupca

Na riža. 3— rezultat korištenja svojstva za raspored u tri stupca. Zapravo se koristi 6 slojeva - zasebno za zaglavlja stupaca i zasebno za same stupce.

Riža. 3. Fiksni dizajn s tri stupca

Primjer: izradite web stranicu s prikazanim izgledom u tri stupca riža. 3. Koristite tehnike rasporeda fiksnih blokova

Izvođenje:

Definirajmo tri sloja za zaglavlja (#header...) i tri sloja za stupce (#col...).
Budući da se stupci i njihova zaglavlja nalaze u dvije različite linije, spojit ćemo ih u spremnike (class="container").
Dobivamo shematski prikaz rasporeda blokova:

Dobivamo sljedeću html strukturu:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<tijelo > <div class = "container" > <div id = "header1" > Evgenij Jevtušenko</div> <div id = "header2" > Valerij Brjusov</div> <div id = "header3" > Eduard Asadov</div> </div> <div class = "container" > <div id = "col1" > Sanjam starog prijatelja<br/> koji je postao neprijatelj<br/> ali ja ne sanjam neprijatelja,<br/> ali od istog prijatelja.<br/> On nije sa mnom<br/> ali sada je posvuda okolo<br/> a glava ode<br/> iz snova naokolo.</div> <div id = "col2" > Veliko je nedostižno blizu,<br/> Samo izdaleka je svečano,<br/><br/> </div> <div id = "col3" ><br/><br/><br/> </div> </div> </tijelo>

Evgenij Jevtušenko

Valerij Brjusov

Eduard Asadov

Sanjam starog prijatelja
koji je postao neprijatelj
ali ja ne sanjam neprijatelja,
ali od istog prijatelja.
On nije sa mnom
ali sada je posvuda okolo
a glava ode
iz snova naokolo.

Veliko je nedostižno blizu,
Samo izdaleka je svečano,
Svi prolazimo ispred velikih
I vidimo samo slučajnu vezu.

U svakom slučaju s maksimalnim poteškoćama
Još uvijek postoji jedan pristup problemu:
Želja je mnoštvo mogućnosti,
A razloga za nevoljkost ima mnogo.

2. Dodavanje stilova za zaglavlja (zaglavlje... selektor) i stupce (kol... selektor)

Širinu stupaca i naslova učinit ćemo istom za sve. Budući da postoje 3 stupca, a prosječna širina stranice trebala bi biti otprilike 700-900 piksela, postavit ćemo širinu stupca na 250 piksela.

#header1, #header2, #header3, #col1, #col2, #col3 (širina: 250px; /* Širina stupca */)

Dodajmo unutarnje margine (uvlake od sadržaja teksta) - ispune i vanjske uvlake kako bismo osigurali prostor između stupaca. Budući da su svojstva postavljena za sve stupce odjednom, a sam cijeli izgled nije centriran, već poravnat ulijevo, postavit ćemo uvlaku samo s jedne strane - lijeve - za sve stupce istovremeno (margin-left ).

#header1, #header2, #header3, #col1, #col2, #col3 ( width: 250px; /* Širina stupca */ padding: 5px; /* Margine oko teksta */ margin-left: 5px; /* Lijeva margina * / )

Također ćemo dodati vanjsku marginu na vrhu, osiguravajući okomiti razmak između naslova i stupaca, kao i marginu za naslove od vrha stranice (margin-top).

#header1, #header2, #header3, #col1, #col2, #col3 ( ... float: lijevo; )

Dodajte obrub za blokove i postavite parametre fonta (font-family, font-weight, font-size, color).

#header1, #header2, #header3, #col1, #col2, #col3 ( ... obrub: 1px puna crna; /* Obrub oko sloja */ font-family: Verdana, Arial, sans-serif; /* Nije serifni ili isječeni font */ težina slova: podebljano; veličina fonta */ boja: /* boja teksta naslova */ )

Dobijamo kod:

#zaglavlje1, #zaglavlje2, #zaglavlje3, #col1, #col2, #col3 (širina: 250px; /* Širina stupca */ ispuna: 5px; /* Margine oko teksta */ /* Gornja podloga */ plovak: lijevo; /* Vodoravno spajanje stupaca */ /* Rub oko sloja */ /* Neserijski ili sans serif font */ font-weight: bold; /* Podebljani tekst naslova */ veličina fonta: 80%; /* Veličina fonta */ boja: bijela; /* Boja teksta naslova */ }

#header1, #header2, #header3, #col1, #col2, #col3 ( width: 250px; /* Širina stupca */ padding: 5px; /* Margine oko teksta */ margin-left: 5px; /* Lijeva margina * / margin-top: 2px; /* Gornja margina */ float: lijevo; /* Nije serifni ili sans-serifni font */ težina naslova: podebljano; /* Veličina fonta */ boja: /* Boja teksta naslova */ )

Postavimo pozadinu zasebno za svaki selektor.

#header1 (pozadina: #B38541;) #header2 (pozadina: #008159;) #header3 (pozadina: #006077;) #col1 (pozadina: #EBE0C5;) #col2 (pozadina: #BBE1C4;) #col3 ( pozadina: #ADD0D9 ;)

#zaglavlje1 ( pozadina: #B38541; ) #zaglavlje2 ( pozadina: #008159; ) #zaglavlje3 ( pozadina: #006077; ) #col1 ( pozadina: #EBE0C5; ) #col2 ( pozadina: #BBE1C4; ) #col3 ( pozadina: #ADD0D9;

Pogledajmo međurezultat:

Riža. 4. Međurezultat

3. Postavljanje stila za spremnike

Sada morate kombinirati zaglavlja i stupce u zasebne slojeve spremnika i dati im odgovarajući stil - odustani od omotača (očisti)

.kontejner ( prozirno : oboje ; /* Otkazuje float wrapping */ }

Spremnik (očisti: oboje; /* Otkazuje plutajuće omotanje */)

Sada sve što preostaje je modificirati font teksta u stupcima mijenjajući njegovu veličinu, stil i boju.

#col1, #col2, #col3 (obitelj-fontova: "Times New Roman", Times, serif; /* Serifni ili serifni font */ veličina fonta: 100%; /* Veličina fonta */ težina-fonta: normalna ; /* Normalni stil */ boja: crna; /* Boja teksta */ )

Konačni kod: sve zajedno

Evgenij Jevtušenko

Valerij Brjusov

Eduard Asadov

Sanjam starog prijatelja
koji je postao neprijatelj
ali ja ne sanjam neprijatelja,
ali od istog prijatelja.
On nije sa mnom
ali sada je posvuda okolo
a glava ode
iz snova naokolo.

Veliko je nedostižno blizu,
Samo izdaleka je svečano,
Svi prolazimo ispred velikih
I vidimo samo slučajnu vezu.

U svakom slučaju s maksimalnim poteškoćama
Još uvijek postoji jedan pristup problemu:
Želja je mnoštvo mogućnosti,
A razloga za nevoljkost ima mnogo.

Proizlaziti:

Riža. 5. Rezultat

Korištenje pozicioniranja slojeva za raspored s tri stupca

Uzmimo kao primjer izgled koji se sastoji od tri stupca razgraničena razdjelnom linijom (slika 6).

Riža. 6. Pozicioniranje slojeva za raspored u tri stupca s razdjelnikom

Primjer: izradite web stranicu s izgledom u tri stupca s razdjelnom linijom, prikazanom na riža. 6. Koristite tehnike fiksnog izgleda s pozicioniranjem slojeva

Izvođenje:

1. Izrada strukture HTML koda

Za ovaj izgled dovoljno je stvoriti tri sloja divova za svaki stupac.

Stoga će struktura biti jednostavna:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<tijelo> <div iskaznica= "col1"> Ivan Bunin </ br></ br> </ br> </ br> </ br> </ div> <div iskaznica= "col2"> </ br> Prozor zlatno svijetli. </ br> </ br> Sve je prekriveno bijelim snijegom. </ div> <div iskaznica= "col3"> I sva su jutra svijetla i čista </ br> </ br> </ br> Krizanteme na mom prozoru. </ br></ br> 1903 </ div> </ tijelo>

Ivan Bunin

Na prozoru srebrnom od mraza,
Krizanteme su procvjetale preko noći.
U gornjim prozorima - nebo je jarko plavo
I zaglaviti u snježnoj prašini.

Sunce izlazi, veselo od hladnoće,
Prozor zlatno svijetli.
Jutro je tiho, radosno i mlado.
Sve je prekriveno bijelim snijegom.

I sva su jutra svijetla i čista
Vidjet ću boje gore,
I do podne će biti srebrni
Krizanteme na mom prozoru.

1903

2. Dodavanje stilova za stupce

Postavimo istu širinu stupaca (width) i unutarnje margine okomito i vodoravno (padding).

#col1, #col2, #col3 (width: 250px; /* Širina stupca */ padding: 0 6px; )

Za uklanjanje blokade slojeva, tj. kako biste ih pozicionirali jedan pored drugog vodoravno, trebate postaviti svojstvo css float.

#col1, #col2, #col3 { širina: 250 px; /* Širina stupca */ podstava: 0 6px; /* Margine okomite i vodoravne */ plutati: lijevo; /* Prelomi slojeve */ }

#col1, #col2, #col3 ( width: 250px; /* Širina stupca */ padding: 0 6px; /* Okomite i vodoravne margine */ float: lijevo; /* Prelamanje slojeva */ )

Budući da razdjelna granica treba biti prisutna samo na unutarnjim stranama slojeva, okvir je potrebno dodati samo na dva sloja s jedne strane (obrub).

#col1, #col2 { granica-desno: 1px čvrsta #000 ; /* Margine okomite i vodoravne */ plutati: lijevo; /* Prelomi slojeve */ } #col1, #col2 { granica-desno: 1px čvrsta #000 ; /* Parametri retka desno od teksta */ }

#col1, #col2, #col3 ( širina: 250px; /* Širina stupca */ padding: 0 6px; /* Okomite i vodoravne margine */ float: lijevo; /* Prelamanje slojeva */ ) #col1, #col2 ( obrub -desno: 1px solid #000; /* Opcije linije desno od teksta */ )

</ stil> </ glava> <tijelo> <div iskaznica= "col1"> Ivan Bunin </ br></ br> Na prozoru srebrnom od mraza, </ br> Krizanteme su procvjetale preko noći. </ br> U gornjim prozorima - nebo je jarko plavo </ br> I zaglaviti u snježnoj prašini. </ div> <div iskaznica= "col2"> Sunce izlazi, veselo od hladnoće, </ br> Prozor zlatno svijetli. </ br> Jutro je tiho, radosno i mlado. </ br> Sve je prekriveno bijelim snijegom. </ div> <div iskaznica= "col3"> I sva su jutra svijetla i čista </ br> Vidjet ću boje gore, </ br> I do podne će biti srebrni </ br> Krizanteme na mom prozoru. </ br></ br> 1903 </ div> </ tijelo>

Ivan Bunin

Na prozoru srebrnom od mraza,
Krizanteme su procvjetale preko noći.
U gornjim prozorima - nebo je jarko plavo
I zaglaviti u snježnoj prašini.

Sunce izlazi, veselo od hladnoće,
Prozor zlatno svijetli.
Jutro je tiho, radosno i mlado.
Sve je prekriveno bijelim snijegom.

I sva su jutra svijetla i čista
Vidjet ću boje gore,
I do podne će biti srebrni
Krizanteme na mom prozoru.

1903

Dizajn s tri stupca je spreman!

Pozdrav prijatelji!

Nastavljamo proučavati izgled i danas prelazimo na najzanimljiviji dio.

Sigurno ste već čuli koncept "izgled bloka". Ali neupućenoj osobi ovaj koncept ne znači ništa. Stoga: tko zna – bravo! Za one koji ne znaju neka pažljivije čitaju.

Block layout je raspored koda web stranice pomoću univerzalnih oznaka spremnika

Pisao sam malo o tome u članku "". Ovdje ćemo govoriti detaljnije i konkretnije.

1. Zašto blokirati izgled?

Jednom davno, u davnim vremenima, naši daleki preci postavljali su web stranice pomoću tablica. Svi elementi stranice bili su smješteni u zasebnim ćelijama, ćelije su bile grupirane u drugim, većim ćelijama, a one su pak ležale u najvažnijoj ćeliji - samoj stranici web-mjesta.

To je bilo vrlo nezgodno jer se pokazalo da je kôd preopterećen i težak za razumijevanje, jer se moralo koristiti nekoliko oznaka za opis svake ćelije.

U današnje vrijeme gotovo nitko ne koristi tablični izgled, iako su neki elementi stranice napravljeni pomoću tablica.

Nemojmo spominjati stare stvari. Prijeđimo na raspored blokova.

Izgled blokova omogućuje vam da izgradite strukturu stranice pomoću pojedinačnih blokova (spremnika)

). Oni su poput cigli koje čine kostur mjesta.

Prednosti blok rasporeda u odnosu na tablični izgled:

Svaki blok je opisan jednom oznakom;
Struktura gniježđenja spremnika se lako prati;
Kontejneri
možete pozicionirati ne samo unutar roditeljskih, već i na druge načine (na primjer, apsolutno pozicioniranje) - o tome ćemo kasnije;
Brzina učitavanja web stranica značajno se povećava. Prema nekim procjenama, brzina se povećava negdje između tri i četiri puta u odnosu na tablicu;
Blokovni izgled ima znatno manju količinu koda u usporedbi s tabličnim izgledom. To znači da je i opterećenje poslužitelja smanjeno;
web-mjesta s blok izgledom prikazuju se sasvim ispravno u svim preglednicima, u bilo kojoj razlučivosti zaslona;
Lako se integrira u bilo koji CMS bez problema.

2. Osnova rasporeda blokova je spremnik

S blok rasporedom, svi elementi stranice sastoje se od blokova (logično, zar ne?).

Blok

je pravokutno područje. Prema zadanim postavkama, blok zauzima cijelu širinu nadređenog elementa; visina bloka ovisi o njegovom sadržaju. Blokovi su poredani okomito, odnosno ako je u kodu stranice upisano nekoliko blokova u nizu, oni će se u pregledniku prikazati jedan ispod drugog.

Ako trebamo rasporediti nekoliko blokova vodoravno, tada u njihovim svojstvima postavljamo parametar " teći okolo" (plutati). Ali o tome kasnije.

Glavna svojstva svakog bloka su: ispuna, obrub i margine.

Želim vam uspjeh u svladavanju vještina webmastera!

Izgled s div blokovima odavno je postao standard i ima brojne prednosti u odnosu na tablični izgled. Međutim, u stvarnosti, programeri početnici su zbunjeni ponašanjem tih istih blokova.

Pogledajmo glavne točke rasporeda blokova. Sada nećemo uzimati u obzir html5 standard, već ćemo se jednostavno osvrnuti na osnove layout-a s div blokovima, koji se koristi prilikom izrade layout-a ili neke pojedinačne komponente stranice.

Što se smatra blok elementom?

Područje takvog elementa na stranici predstavljeno je pravokutnikom; prema zadanim postavkama zauzima cijelu dostupnu širinu i počinje u novom retku.
Najčešći element koji se koristi u rasporedu blokova je univerzalni element

Dakle, od jednostavnog prema složenom. Pogledajmo kako se divovi prikazuju prema zadanim postavkama bez utjecaja stilova na njihov položaj. Radi jasnoće, dodavat ćemo stilove elementima u liniji, putem atributa style.

Blok 1

Blok 2

Blok 3

Dodajmo vrijednost širine za svaki blok:

Blok 1

Blok 2

Blok 3

Vidljivo je da se svaki blok, prema specifikaciji, nalazi u novom retku. To je njihovo normalno ponašanje.

Sada se postavlja pitanje, kako se postaviti div blokovi u jednoj liniji, jedan za drugim?

U tu svrhu postoji svojstvo koje određuje na koju će se stranu blok prisilno poravnati. Istodobno, s drugog ruba, može teći oko drugih elemenata.

Svojstvo float ima sljedeća značenja:

lijevo - blok je poravnat s lijevim rubom, teče udesno
desno - blok je poravnat s desnim rubom, teče ulijevo
none - nije navedeno omatanje, blok se ponaša prema zadanim postavkama, kao u prethodnim primjerima.

Dodajmo float:left našim blokovima tako da blokovi budu poravnati ulijevo:

Blok 1

Blok 2

Blok 3

Kao rezultat toga, blokovi su poredani na jednoj liniji. U redu, recimo da želimo dodati još jedan div na dno, i to ćemo učiniti bez navođenja svojstva float:

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Jedinica 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Jedinica 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Zašto se to dogodilo? Ukratko, to se događa jer plutajući elementi ispadaju iz tijeka dokumenta. Međutim, ovo je tema za poseban članak. Ovdje ćemo se upoznati s novim svojstvom koje kontrolira ponašanje plutajućih elemenata:

lijevo - onemogućuje prelamanje s lijeve strane, svi će elementi biti prikazani u novom retku (ispod elementa)
desno - sprječava omotavanje elementa na desnu stranu
oboje - zabranjuje obilaženje elementa s obje strane, preporuča se koristiti kada je jasno potrebno prikazati element u novom retku ili je nepoznato s koje strane je moguće omotati druge elemente;

Dodajmo svojstvo clear:left bloku 4, koje će spriječiti da ovaj element teče oko drugih plutajućih elemenata na lijevoj strani.