Metodele de bază de plasare a blocurilor (div) pe orizontală, folosind css, Vaden pro

De multe ori, în practică, este necesar pentru a rezolva problema de clustering și alinierea cu conținut CSS. Astăzi ne uităm la modalitățile de bază de a plasa elemente într-un rând orizontal.

Materialul din acest articol este proiectat pentru a ajuta web designeri novice pentru a învăța tehnici de aspect de pagini web.

Pentru a alege, sau metode

Există mai multe modalități de amplasare a elementelor structurale într-un rând într-un plan orizontal. Cel mai util, din punctul de vedere al utilizării practice, sunt:

Fiecare dintre ele are avantajele sale, dezavantaje și aplicații. Să le ia în considerare în ordine.

„Pentru smucitură“ sau un pic de teorie

Toate elementele HTML structurale pot fi împărțite în:

Inlaynovye (built-in) - cum ar fi img, deschidere și altele asemenea. Noi nu putem schimba trecutul lor și le cere dimensiuni liniare arbitrare.

Bloc - care ocupă întreaga lățime a unității de bază, începe întotdeauna cu o linie nouă - p, h, div.

Un exemplu ilustrativ de încorporat și structuri de bloc prezentate mai jos:

«Float» Metoda

După cum deja cunoscut (vezi. De mai sus), un membru al blocului plasat pe o linie nouă, indiferent de lățimea predeterminată la ea (lățime). Conform acestui fapt, reducerea dimensiunii orizontale a div, într-un rând de ochiuri nu construi.

Cele mai populare (în special în rândul web designeri novice), metoda de rezolvare este de a folosi proprietățile float.

proprietatea CSS float a câștigat o mulțime de popularitate și valoare practică după trecerea de la un aspect de masă la metoda blocului.

Float: left (dreapta) transformă elementul bloc plutitor, aliniază stânga margine (dreapta) al unității mamă și stabilește debitul în jurul dreapta (stânga), text și alte elemente.

De exemplu, vom crea patru blocuri care trebuie să fie plasate într-un rând:

Și foaie de stil extern, cu următorul cuprins:

Rezultatul este de patru blocuri dispuse într-un rând orizontal și sunt aliniate pe marginea din stânga a unității mamă:

Uneori, în practică, este necesar să se alinieze blocurile de pe marginea din dreapta a elementului mamă. Modificarea debitului în jurul blocurilor din exemplul precedent:

Fiți atenți la etichetele situate în blocuri. La prima vedere poate părea că exemplul lucrat strâmb. Dar, de fapt, browser-ul a procesat codul corect: Citiți blocul de sus în jos, și a făcut ceea ce am cerut de la el - Aliniere la dreapta. Notă acest punct atunci când se utilizează proprietățile float: drept.

Pentru a întrerupe curgerea în jurul elementelor de o anumită locație, utilizați linia:

Distanța dintre blocurile din exemplul de mai sus, am cerut folosind indentare marja de-dreapta. Dar ce se întâmplă dacă aveți o sarcină în loc de aspectul paginii blocuri într-un rând pentru a le alinia, și chiar că a fost doar Spațierea dintre ele, dar nu în afara?

Algoritmul este după cum urmează.

Ca rezultat, vom obține următoarea imagine:

Ei bine, pentru toate situațiile practice nu vor fi luate în considerare, în mișcare la caracteristicile comune.

1. Lățimea blocurilor trebuie să fie fixate. În caz contrar, veți obține ceva de genul:

Atunci când reducerea dimensiunii unității părinte sau un browser Web, nu se potrivesc blocuri muta în jos sub unul pe altul. Pentru a evita o astfel de îmbinare, se aplică proprietății min lățime.

Nu uita DOCTYPE! documentului, cu excepția cazului în afișarea paginii în IE, prin aplicarea metodei descrise mai sus plasarea orizontală a blocurilor, va indenta 17px ordinea corectă (probabil, dezvoltatorii sub scroll marcate).

Pentru a evita afișarea paginii diferențele în browsere diferite, unele de masterat de web recomanda pentru a da valoarea exactă a marjei de umplutură și proprietăți pentru organism.

Spre deosebire de metoda de «inline-bloc» nu alerga la prezența diferenței dintre blocurile în absența unei marje-uri.

Pentru a defini liniuțele și câmpurile atunci când elementele care introduc folosesc proprietăți în marjă și padding.

Metoda «inline-block»

Ca un mic bloc și elemente au avantajele și dezavantajele lor în contextul fiecărei sarcini specifice la îndemână. Și dacă ai combina avantajele lor?

Faceți cunoștință, unghii program - proprietate display: inline-bloc.

display: inline-block generează un element al blocului de linie, care este în esență liniară, dar își păstrează proprietățile bloc - se pot modifica dimensiunile liniare, setați marginile, liniuțe etc.

Element Block-line are următoarele proprietăți:

• înălțimea și lățimea blocului este determinată automat de conținutul și semnificația adâncitura (umplutură)
• înălțimea și lățimea blocului poate fi definit este fix
• Nici un efect al prăbușirii granițelor.

Luați în considerare exemplul de a crea un meniu de navigare simplu, care conține imagini și link-uri.

Rezultatul este un astfel de meniu:

După cum puteți vedea, a ieșit strâmbă. Dar noi nu vom fi supărat, în care aplicăm la Divas CSS proprietatea noastră vertical-align (vezi mai jos pentru detalii.)

Acum, barul nostru de navigare este nivelat la linia de sus:

Desigur, exemplul de mai sus este un primitiv, dar eu sunt sigur că pe această bază va fi capabil de a crea o adevărată capodoperă.

1. Atunci când reducerea lățimii ferestrei browserului nevmeschayuschiysya peremeschaetsya în jos elementul (cum ar fi în cazul float: left)
2. Elementul afișat ca un inline-bloc sensibil la spații. Aceasta conduce la faptul că valorile chiar zero ale marjei între blocuri este un decalaj. Acest decalaj depinde de fontul utilizat. De exemplu, ia în considerare lista:
   HTML:
   

Rezultatul redarea unui astfel de cod ar fi următoarea imagine:

Există mai multe modalități de a elimina golurile:

• alege marja de valori negative:
  

specifica font-size: 0 pentru unitatea mamă și font-size ≠ 0 pentru inlaynovogo;

nu foarte frumos, dar încă ... scrie un cod într-o singură linie

Rezultatul aplicării oricăreia dintre metodele de mai sus este următoarea structură:

Dacă aveți mai multe elemente bloc de linie într-un rând au înălțimi diferite, atunci ei trebuie să setați proprietatea pe verticală Alinierii: top. Permiteți-mi să vă reamintesc că implicit vertical-align setat la valoarea inițială.

Cross-browser.

• Pentru versiunile mai vechi de Firefox pentru a adăuga liniile:
  

și înfășurați elementul într-un div-înveliș suplimentar.

IE 7 și versiunile anterioare - adăugați liniile:

Rețineți că anumite browsere (primul - Firefox, pe de altă parte - IE) aceste linii reacționează în mod selectiv.

«Tabel» Metoda

Abordarea tabelară a fost mult timp un aspect standard, care este în primul rând datorită simplității și aspectul intuitiv. Cel mai probabil, acest lucru a fost cauza mesei de formatare CSS.

Proprietăți afișare: tabel (. Tabel cu celule inline-masă), pentru a permite elementelor de masă de formatare, fără utilizarea de tabele HTML.

Pentru blocul de plasare orizontală, avem nevoie de elementul de bază având o proprietate de afișare: tabel. si copil elemente (celule), având afișajul de proprietate: masa de celule:

1. Spre deosebire de metodele de «inline-bloc» și «float», cu o scădere a lățimii ferestrei de browser-ul web, celulele nu se mișcă în jos.
2. Nu aveți posibilitatea de a seta proprietatea la o marjă de celule pseudo.
3. Cross-browser. Proprietățile de afișare de familie: masa * nu sunt acceptate de IE6, IE7. În plus, IE8, puteți observa elementele dinamice psevdotablichnyh de redare eroare în formă de celule dispărând în mod aleatoriu. Această eroare este cel mai des văzut în desenul primar documentul

Count: 15 (media 4.8 din 5)