4 Metoda șablon aliniere coloană

Una dintre cele mai dificile aspecte atunci când se utilizează CSS este instalarea de aceeași înălțime pentru coloanele. Există diferite metode, dintre care fiecare are plusuri și minusuri. În această lecție ne vom uita la patru dintre ele.

Ce înțelegem prin coloane de înălțime egale?

Acest efect poate fi realizat prin utilizarea de fundal CSS, care va avea aceeași înălțime pentru difuzoare.

Acest lucru este destul de un truc vechi, care este utilizat pe scară largă pentru a crea coloane de aceeași înălțime.

Acesta constă în utilizarea unei imagini de fundal se repetă pe verticală. Un exemplu de o astfel de imagine este prezentată mai jos (cifrele au crescut ușor).

O astfel de imagine are de obicei 1 px în înălțime și lățime egală cu lățimea șablonului.

Exemplul folosește următoarea marcare:

Recipientul poate fi folosit ca un tag corp. Exemplul folosește un div element separat pentru a demonstra fezabilitatea aplicării metodei la conținutul paginii.

Codul CSS este foarte simplu. Shift unitățile plutitoare și #content #sidebar și configurată lățime corespunzătoare acestora. Setați marginile pentru containere #container.

În fundal containerului folosim imaginea faux-column.png (este, așa cum este descris mai sus). De asemenea, proprietatea overflow este setată pentru ea: ascuns. Este necesar să se prevină containerul pliabil.

Containerul va avea întotdeauna aceeași înălțime ca și cea mai mare coloana. Imaginea de fundal, astfel că va arăta ca și în cazul în care difuzoarele sunt aceeași înălțime.

Această metodă este cel mai bine utilizat într-un tipar fix, dar poate fi folosit cu succes pe majoritatea modelelor plutitoare.

Puteți utiliza, de asemenea, gama completă de instrumente vizuale pentru fundaluri (umbre, frontiere, și așa mai departe). Puteți utiliza, de asemenea, imaginea de mai mult de 1 px în înălțime.

• Ușor să pună în aplicare ..
• Acesta funcționează indiferent de înălțimea coloanei.

• Este nevoie de o imagine care utilizează o solicitare HTTP suplimentară.
• Modificări ale modelului necesită modificări în imagini.

Această metodă folosește, de asemenea, un fundal setare pentru container. În ciuda faptului că metoda de coloane pseudo este de utilizare limitată, este foarte simplu și funcționează bine.

Markup utilizată este aceeași ca în metoda anterioară:

Codul CSS este, de asemenea, foarte simplu. Exemplul folosește lățimea plutitoare de coloane, dar poate fi, de asemenea, utilizate valori fixe.

Am stabilit o culoare de fundal pentru elementele și #sidebar #content. Asigurați-vă că pentru a seta culoarea pentru acea coloană, care se presupune a fi cea mai lungă.

Principala diferență de metoda de coloane false este de a utiliza culoarea de fundal în locul unei imagini. Principiul de funcționare este același - containerul cu fundalul întins până la o înălțime de mai multe coloane înalte, și a format o imagine în care se pare că toți vorbitorii au aceeași înălțime.

• Ușor de implementat.
• Ușor de întreținut.

• Este dificil să pună în aplicare pentru suma de mai mult de 2 coloane.
• Este nevoie de cunoștințe, care coloana este mai lung.
• Ea nu funcționează în șabloanele atunci când pe diferite pagini de aceeași coloană este mai lungă dintre toate, este mai scurt.

Această metodă folosește coloanele cadru și marginile negative, pentru a forma iluzia de coloane de înălțime egale.

Markup HTML nu este diferit de metodele anterioare:

Dar, cod CSS mai interesant. Recipientul are o lățime fixă ​​și este centrată pe pagină. O proprietate pentru elementele #sidebar și #content au implicații interesante:

Toate culorile care sunt utilizate în această metodă sunt setate pentru a #Content element de proprietăți. I se atribuie o culoare de fundal și lățimea cadrului este egală cu lățimea barei laterale. Culoarea de frontieră utilizați cel care ar trebui să sidebar fundal.

Primul pas pentru a cere valoarea negativă bara laterală dreapta liniuță egală cu lățimea sa. Deci, ea a împins înapoi pe ecran. Problema este acum în ordinea elementelor suprapuse pe partea de sus a reciproc. elementul #sidebar este situat în partea de sus. Pentru a reveni la panoul lateral de sus, acesta este setat la proprietatea poziția: relativă.

• Acesta funcționează indiferent de care coloana este mai lung.
• Pur și simplu instalați.
• Ușor de întreținut.

• Panoul lateral trebuie să aibă o lățime de valoare fixă, ca proprietate de frontieră lățime percepe numai valori absolute.
• Valorile negative ale amprentei nu poate fi văzut în versiunile mai vechi ale IE.

Această metodă este mult mai greu de înțeles decât altele.

Elementul suplimentar este adăugat div marcaj.

cod CSS pentru această metodă este mai complicată decât metodele descrise mai sus pentru aliniere. Pentru ambele #sidebar elemente #Content și proprietățile sunt date la trecerea din stânga și lățimea precum și ceva suplimentar.

Mai întâi facem o coloană plutitoare și containere. În exemplu, toate deplasat spre stânga, dar direcția de deplasare nu joacă un rol important.

Apoi setați fundalul pentru cele două containere div. Containerul interior are un panou lateral model, în aparență - modelul de conținut principal.

Dacă acum vă verificați că afișează browser-ul, acesta va fi vizibil numai fundalul containerului interior, așa cum este mai mare în ordinea de stivuire a elementelor.

Pentru poziționarea containerului interior pentru a stabili proprietățile sale de valoare drept de 75%, care este egală cu lățimea coloanei principale de conținut.

Am stabilit poziționarea relativă și valoarea de stânga 75% pentru a schimba bine.

• Metoda funcționează indiferent de lățimea coloanelor
• Metoda funcționează în toate șabloanele.
• Puteți genera orice număr de coloane.

• Metoda este destul de greu de înțeles.
• Este nevoie de un div element suplimentar.

concluzie

Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!

Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!

Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.

Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!