Coloanele au aceeași înălțime. Blocuri de aceeași înălțime

Coloanele obținute folosind celulele tabelului au aceeași înălțime. Acest lucru nu este surprinzător, deoarece celulele sunt interconectate și când înălțimea unei celule crește, înălțimea celulelor adiacente crește în mod corespunzător. Mulți dezvoltatori încearcă să creeze un efect similar folosind straturi, de exemplu. faceți-le interconectate și de aceeași înălțime, indiferent de volumul de conținut. De fapt, atunci când sunt așezate în straturi, înălțimea coloanelor este setată automat în funcție de volumul conținutului. Prin urmare, tehnici artificiale pentru crearea coloanelor aceeasi inaltime contrazice însăși ideologia straturilor.

Astfel, se poate observa o împărțire clară a abordărilor aspectului:

• dacă se folosesc straturi, atunci coloanele ar trebui să aibă o înălțime determinată de conținutul lor;
• coloanele de aceeași înălțime sunt construite folosind un tabel.

Ignorarea acestor principii duce la complexitatea codului și la apariția erorilor în afișarea documentului de către browsere, ca urmare, timpul pentru dezvoltarea site-ului și depanarea acestuia crește. O excepție este utilizarea proprietății înălțime, care stabilește înălțimea straturilor. Exemplul 5.32 arată cum să creați un astfel de aspect.

Exemplul 5.32. Folosind înălțimea

Rezultatul acestui exemplu este prezentat în Fig. 5.23.

Orez. 5.23. Coloane de aceeași înălțime

Este clar că volumul textului în coloane poate varia, așa că înălțimea este de obicei indicată cu o marjă. De asemenea, puteți adăuga proprietatea overflow cu valoarea auto . Dacă textul depăşeşte inaltime data, va apărea o bară de defilare.

Există și metode bazate pe înșelăciune vizuală. Coloanele apar la fel prin utilizarea chenarelor ca coloane, adăugând imagine de fundal sau culoarea de fundal. În realitate, înălțimea lor, așa cum ar trebui să fie, este determinată de conținut.

Borduri ca Coloane

Esența metodei este următoarea: setăm un chenar la stânga sau la dreapta elementului, a cărui lățime coincide cu lățimea uneia dintre coloane. Este clar că granițele sunt destinate unor scopuri complet diferite, dar în în acest caz, Folosirea lor în acest fel vă permite să obțineți rezultatul dorit. Pentru a face acest lucru, creați un strat numit aspect și setați stilul pentru acesta, așa cum se arată mai jos.

Aspect (chenar-stânga: 200px solid #c7e3e4; /* Lățimea marginii și culoarea coloanei din stânga */ fundal: #e0d2c7; /* Culoare de fundal a coloanei din dreapta */ )

Deoarece avem un singur strat, coloanele simulate folosind late linie verticala iar fundalul au întotdeauna aceeași înălțime. Tot ce rămâne este să plasezi informațiile exact deasupra graniței. Pentru coloana din stânga, să o numim col1 , ar trebui să setați lățimea și să utilizați proprietatea stil float pentru a indica faptul că este un element plutitor. Deoarece chenarul nu face parte din blocul de text, trebuie să mutăm stratul col1 la stânga adăugând o proprietate margin-left cu o valoare negativă egală cu lățimea chenarului.

Col1 ( lățime: 200px; /* Lățimea coloanei din stânga */ float: stânga; /* Transformă-l într-un element plutitor */ margin-left: -200px; /* Mută ​​totul la stânga cu lățimea chenarului * / )

ÎN în acest exemplu Combinarea proprietăților float și margin-left vă permite să poziționați conținutul stratului direct deasupra marginii. Pentru coloana din dreapta col2 nici unul conditii suplimentare Nu este nevoie să specificați, textul va fi poziționat așa cum ne solicităm.

Datorită faptului că se folosește un element plutitor, se poate întâmpla ca textul din coloana din stânga să se extindă dincolo de dreptunghiul colorat. Pentru a preveni acest lucru, ar trebui să înlocuiți proprietatea float folosind clear . În acest caz, nu puteți utiliza overflow : spațiul ascuns din interiorul chenarului, inclusiv coloana noastră falsă, va fi tăiat. Cod final prezentat în Exemplul 5.33.

Exemplul 5.33. Două coloane

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultatul exemplului este prezentat în Fig. 5.24.

Orez. 5.24. Două coloane create cu chenar

Pentru a crea un aspect cu trei coloane, trebuie adăugat un chenar la stânga și la dreapta containerului de aspect. Pentru varietate, lățimea coloanei din dreapta este indicată în em (chenarul nu poate fi specificat ca procent).

Aspect ( chenar-stânga: 200px solid #c7e3e4; /* Lățimea marginii și culoarea coloanei din stânga */ marginea-dreapta: 15em solid #ecd5de; /* Lățimea marginii și culoarea coloanei din dreapta */ fundal: #e0d2c7; / * Culoarea de fundal a coloanelor din mijloc */ )

Pentru prima coloană cod de stil rămâne neschimbat, iar a treia coloană ar trebui să indice proprietate de plutire cu valoarea dreapta și mutați-o spre dreapta folosind proprietatea margin-right (Exemplu 5.34).

Exemplul 5.34. Trei coloane

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultatul exemplului este prezentat în Fig. 5.25.

Orez. 5.25. Trei coloane create cu chenar

Browserul IE6 are o eroare cu margini și nu afișează corect aceste exemple. Pentru ca aspectul să fie afișat corect, dimensiunea marginilor sale ar trebui să fie redusă la jumătate.

Imagine de fundal

Principiul de utilizare imagine de fundal pentru coloane se bazează pe faptul că vedem o imagine care se repetă pe verticală, deasupra căreia se află text și alte elemente. Deoarece trebuie să facem efectul coloanelor, fundalul nu este adăugat coloanelor individual, ci părintelui lor. Ceea ce contează aici este ce fel de fundal este, ce este și care sunt dimensiunile sale. Să presupunem că avem un aspect fix cu două coloane cu o lățime de 980 de pixeli, coloana din stânga ocupă o lățime de 200 de pixeli. Creați o imagine cu dimensiunea de 980x60 pixeli. Lățimea corespunde lățimii aspectului, iar înălțimea este de obicei de 20-30 de pixeli.

Mulți dezvoltatori realizează o imagine cu o înălțime de 1–2 pixeli, crezând că dimensiunea fișierului va fi minimă și că încărcarea va fi mai rapidă. Cu toate acestea, contrariul este adevărat. Computerul durează de câteva ori mai mult să afișeze o pagină cu un fundal îngust, ceea ce este vizibil mai ales când derulați fereastra browserului. Deci, atunci când utilizați o imagine de fundal, faceți imaginea cu o înălțime de cel puțin 20-30 de pixeli - aceasta o va afișa mai repede pe pagină.

Este prea plictisitor să facem coloanele monocromatice, deoarece avem de-a face cu imagini, așa că să adăugăm niște delimitatori pe părțile laterale ale coloanelor (Fig. 5.26). Cel mai important lucru aici este că modelul se repetă fără îmbinări verticale.

Orez. 5.26. Imagine de fundal

Acum inserăm un fundal pentru stratul de aspect, în interiorul căruia se află coloanele noastre (exemplul 5.35).

Exemplul 5.35. Fundal pentru aspect fix

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 5.27. Se vede clar că coloanele au aceeași înălțime.

Orez. 5.27. Coloane de înălțime egală create de o imagine de fundal

Când utilizați orice elemente decorative într-un desen, trebuie să aveți grijă ca textul din acestea să fie îndepărtat prin căptușeală și să nu se „lipească”.

Pentru trei sau mai multe coloane într-un aspect fix, procesul de pregătire a imaginii este similar, dar pentru un aspect fluid există o serie de caracteristici datorită faptului că lățimea aspectului poate fi în limitele gamă largă. Apoi imaginea de fundal trebuie făcută în mod deliberat lată, de exemplu, 2000 de pixeli. Fundalul nu afectează lățimea paginii web și dacă nu se încadrează în dimensiunile alocate, este tăiat. Vom profita de această calitate. Ca exemplu, luați în considerare macheta de cauciuc cu o coloană dreaptă fixă ​​de 300 de pixeli lățime. Pentru aceasta, vom face o imagine de 2000x30 pixeli lățime cu un dreptunghi roșu închis în dreapta (Fig. 5.28).

Orez. 5.28. Fundal pentru macheta de cauciuc

Coloana fixă ​​este situată în dreapta, așa că fundalul trebuie setat și în colțul din dreapta sus, specificând 100% 0 pentru proprietatea fundal (Exemplu 5.36).

Exemplul 5.36. Fundal pentru macheta de cauciuc

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

În cele din urmă, voi enumera avantajele și dezavantajele utilizării fundalurilor ca coloane artificiale.

pro

• Metoda este simplă și nu necesită modificarea codului existent.
• Puteți adăuga diferite elemente decorative cum ar fi degrade, linii etc. Acest lucru vă va permite să diversificați designul coloanelor.

Minusuri

• Cele mai bune rezultate se obțin atunci când una sau toate coloanele au dimensiuni fixe. Pentru un aspect în care lățimea coloanelor este cauciuc, nu va fi posibil să adăugați corect un fundal.
• Dacă dezactivați imaginile din browser, textul poate deveni ilizibil. Cu toate acestea, acest lucru poate fi ocolit cu ușurință prin setarea culorii de fundal împreună cu imaginea de fundal.
• Fișierul imagine de fundal poate avea volum mareși durează mult să se încarce. Rețineți că pentru imagine simplă, ca cel prezentat în Fig. 5.27, acest lucru nu este adevărat cu dimensiuni de 2000x30 pixeli, fișierul are doar 275 de octeți.

Culoare de fundal

Când se simulează coloane de aceeași înălțime folosind o imagine de fundal, aceasta este adăugată prin proprietatea de fundal la elementul părinte al coloanelor (layer layer ). Culoarea de fundal funcționează într-un mod similar. Este suficient să îl setați pentru stratul de strat și să dați culoarea proprie celei mai înalte coloane. Exemplul 5.37 arată un aspect cu trei coloane în care culoarea de fundal a coloanelor laterale este setată prin stratul de strat, iar culoarea de fundal a coloanei centrale este setată prin stratul col2.

Exemplul 5.37. Utilizări culoare de fundal pentru difuzoare

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Proprietatea înălțime din exemplu a fost adăugată pentru a face vizibil efectul de culoare asupra coloanelor. In realitate nu este necesar.

Această metodă are o serie de dezavantaje care ar trebui luate în considerare în practică.

• Este dificil de estimat în avans care coloană va avea cea mai mare înălțime.
• Pentru a „colora” coloanele, se folosesc doar două culori, deci este imposibil să se acorde trei sau mai multe coloane o culoare diferită și să aibă aceeași înălțime.

Metoda are și avantaje, dar acestea pot fi exprimate în doar câteva cuvinte: simplitatea și eleganța soluției. Prin urmare, această metodă poate fi găsită destul de des în aspect, în special, este folosită pe site-ul web W3C.

Vom folosi liste ca markup. În fiecare element li Vom plasa o poza a produsului si descrierea acestuia. Fotografii făcute intenționat marimi diferite. De regulă, atunci când umple un site, un administrator rareori se gândește la faptul că imaginile ar trebui optimizate și le încarcă pe site așa cum sunt. Sarcina noastră va fi să centram imaginile și să facem toate blocurile la aceeași înălțime.

• 
• 
• 
• 
• 
  Mai jos apare textul clasic al Lorem Ipsum folosit încă din secolul al XVI-lea.
• 
  Textul clasic Lorem Ipsum.
• 
  Mai jos apare textul clasic al Lorem Ipsum folosit încă din secolul al XVI-lea. Textul clasic Lorem Ipsum.
• 
  Textul clasic al lui Lorem Ipsum folosit încă din secolul al XVI-lea.

Să adăugăm stiluri de design. Nu mă voi opri asupra lor în detaliu - aici, după cum se spune, fiecare este liber să aplice ceea ce consideră potrivit.

Select_main ( margin:40px auto 0; width:800px; ) ul ( width:100%; ) li ( margin:0 10px 20px 5px; padding:10px; width:160px; display:inline-block; vertical-align:top; *display:inline; *zoom:1; border:1px solid #e5e5e5 ) .img ( lățime: 100%; înălțime: 121 px; text-align: center; poziție: relativă; ) :table-cell; vertical-align:middle ) .img img ( width:100%; )

Acum să mergem la pagină și să vedem ce avem. Dacă totul este mai mult sau mai puțin decent cu fotografia, atunci cu blocurile în sine imaginea este inestetică. Hai să scriem scenariu mic, ceea ce va facilita rezolvarea acestei probleme.

$(document).ready(function())( var maxH = 0; $("li").each(function () ( var h_block = parseInt($(this).height()); if(h_block > maxH ) ( maxH = h_block; )); $("li").height(maxH));

Salvăm, reîncărcăm pagina și admirăm munca depusă. Toate blocurile au luat aceeași înălțime.

Acum puțin mai multe detalii despre ceea ce am scris aici. Declarați o variabilă maxHși atribuiți-i o valoare 0 . Apoi, selectați toate elementele liîn director și parcurgeți-le într-o buclă folosind funcția fiecare. În corpul buclei declarăm o altă variabilă h_blocîn care stocăm valoarea înălțimii fiecărui element li, rotunjit la un număr întreg folosind funcția parseInt. Tot în aceeași buclă, punem o condiție - dacă valoarea blocului curent este mai mare decât valoarea din variabilă maxH, apoi atribuim această valoare celui din urmă. Cu alte cuvinte, verificăm înălțimea fiecărui bloc și stocăm cea mai mare înălțime într-o variabilă maxH. Și în sfârșit, după ce a trecut prin toate liși după ce am calculat cea mai mare înălțime, o atribuim tuturor blocurilor (linia $("li").height(maxH);).

Cu toate acestea, această metodă are un dezavantaj. Să presupunem că administratorul a adăugat prea mult text la unul dintre blocuri. Aplicând metoda descrisă mai sus, vom alinia toate blocurile la cel mai sus și vom obține mult spațiu liber în partea de jos în rest.

Este imposibil să corectați complet această situație (cu excepția cazului în care reduceți volumul textului în secțiunea problematică), dar este foarte posibil să reduceți dezavantajul la minimum.

Să rescriem scenariul. La fel ca prima dată, va alinia blocurile la cel mai înalt, dar va fi puțin mai inteligent să faci asta. Îl vom învăța să numere cantități liîn fiecare rând și aliniați-le la cel mai înalt din rând și nu la cel mai înalt de pe pagină.

$(document).ready(function())( var line = $("li"); var times = 0, rows = Array(), max = 0; line.each(function() ( if (time ==) 4) (pentru (var i = 0; i< rows.length; i++) { rows[i].css("height", max); } max = 0; times = 0; rows = ; } if (max < $(this).height()) { max = $(this).height(); } rows = $(this); times += 1; }); if (times != 0) { for (var i = 0; i < rows.length; i++) { rows[i].css("height", max); } } });

Asta e tot. Ce metodă să folosiți trebuie decisă în funcție de situație, dar, în orice caz, a doua metodă este mai universală.

Articolul rezolvă problema alinierii înălțimii containerelor cu text de diferite dimensiuni folosind principiile de aranjare a blocurilor.

Când scriu resurse informaționale Destul de des recurg la o schemă cu mai multe coloane. Cu alte cuvinte, conținutul paginii este împărțit în mai multe coloane. Acest principiu este folosit mai des pentru partea text a conținutului. Cu toate acestea, cantitatea de text din fiecare coloană poate fi diferită. Se pune întrebarea cum să vă asigurați că atunci când marimi diferite textul este aliniat la înălțimea coloanei, iar inițial înălțimea blocului rămâne necunoscută. Mai jos este o diagramă a două cazuri diferite

Dintre cele două scheme prezentate, prima este mai comună. De aceea astăzi vom lua în considerare opțiuni posibile implementarea unor astfel de proiecte. De asemenea, merită remarcat faptul că, pentru aspectul de tabel învechit, această problemă nu este deloc problematică, dar cu aspectul blocului, care ne domina timpul, apar unele dificultati. Dar nu a existat niciodată o problemă pe care o bună ingeniozitate și munca grea să nu o poată rezolva.

Imagine de fundal

Așadar, ideea este destul de previzibilă și năucită (întrucât multe probleme sunt rezolvate prin înlocuirea acesteia cu o poză), are o serie de avantaje care nu pot fi ignorate:

• compatibilitate ridicată între browsere;
• nu există probleme cu validarea;
• se folosește un număr minim de blocuri auxiliare, ceea ce reduce cantitatea de cod HTML.

Ca de obicei, nu există avantaje fără dezavantaje:

• încărcați pe server din cauza utilizării cantitate suplimentară poze;
• funcționează numai dacă se cunoaște lățimea exactă a coloanelor.

Principiul de funcționare aceasta metoda este că părintele nu este setat la o valoare a înălțimii. Este necesar datorită înălțimii celei mai înalte coloane cu text. Și pentru a face vizual înălțimea coloanelor să pară egală, creăm o imagine cu diferite culori de fundal pentru coloanele noastre. Această imagine va arăta ca o dungă în trei culori

Este recomandat să utilizați înălțimea acestei linii ca 1 pixel pentru a salva dimensiunea imaginii. Am configurat o repetare ciclică a acestei imagini de-a lungul axei ordonatelor și obținem coloane de aceeași înălțime (cel puțin vizual). Mai jos este codul care implementează această metodă.

HTML

< div class = "background" > < div class = "left" > < div class = "center" > < div class = "right" >

Fon ( lățime: 600px; fundal: url(fon. png) repetare- y; float: stânga; ). stânga (lățime: 200px; float: stânga; ) . centru (lățime: 200px; float: stânga; ) . dreapta (lățime: 200px; plutire: stânga; )

Drept urmare, în browser obținem următoarea imagine:

margine + padding + overflow

Aș descrie această decizie ca fiind arogantă, dar foarte eficientă. Principiul său de funcționare este că creează element părinte cu foarte de mare valoareînălțime, care se realizează datorită valorii proprietății padding-bottom, dar în același timp este compensată de aceeași valoare negativă a marjei exterioare - margin-bottom. Și în plus, adăugăm proprietatea overflow la părintele cu valoarea ascuns, care va tăia înălțimea părintelui la înălțimea celei mai mari coloane.

Pentru a face acest lucru, scrieți în cod

HTML

< div class = "background" > < div class = "left" > < div class = "center" > < div class = "right" >

Fundal ( lățime: 600 px; depășire: ascuns; ) . stânga ( lățime: 200 px; float: stânga; fundal: #fc7777; umplutură- jos: 20000 px; margine- jos: - 20000 px; ). centru ( lățime: 200 px; float: stânga; fundal: #7780fc; umplutură- jos: 20000 px; margine- jos: - 20000 px; ). dreapta ( lățime: 200 px; float: stânga; fundal: #fcaf77; umplutură- jos: 20000 px; margine- jos: - 20000 px; )

Rezultatul în browser va fi similar cu metoda anterioară.

Această metodă va avea următoarele efecte pozitive:

• oferă o dispunere de cauciuc a blocurilor;
• elimină încărcarea de pe server datorită prezenței unui număr suplimentar de imagini de fundal;
• reacție pozitivă la verificarea validității codului;
• minimizează utilizarea containerelor auxiliare, ceea ce reduce codul.

Defecte:

• în versiuni mai vechi browser Opera nu funcționează deoarece acest program interpretează incorect proprietatea de overflow.

Metoda ambalajelor suplimentare

În acest caz, trebuie să creați un înveliș suplimentar cu culoarea adecvată pentru fiecare coloană și apoi să afișați fiecare fundal pentru o anumită coloană. poziționare relativă. Principiul de funcționare este foarte greu de înțeles, puteți afla mai multe despre cum funcționează această metodă de la autorul ideii, Matthew Taylor. Cu toate acestea, fără a intra în detalii, puteți folosi șablonul lui de mai jos

HTML

< div class = "background1" > < div class = "background2" > < div class = "background3" > < div class = "left" > < div class = "center" > < div class = "right" >

Fundal1 ( lățime: 100%; fundal: #fc7777; float: stânga; poziție: relativă; dreapta: 30%; ) . background2( lățime: 100%; fundal: #7780fc; float: stânga; poziție: relativă; dreapta: 40%; ) . background3 (lățime: 100%; fundal: #fcaf77; float: stânga; ) . stânga ( lățime: 30%; float: stânga; preaplin: ascuns; poziție: relativă; stânga: 70%; ) . centru (lățime: 30%; float: stânga; preaplin: ascuns; poziție: relativă; stânga: 70%; ) . dreapta ( lățime: 39%; plutitor: stânga; preaplin: ascuns; poziție: relativă; stânga: 70%; )

Rezultatul în browser va fi complet identic cu metodele anterioare.

Următoarele caracteristici pozitive merită remarcate pentru această metodă:

• acceptat de toate browserele;
• respectă principiile așa-numitei „dispunere cauciuc”;
• salvează indicatorul de validitate a codului.

Efectul nedorit al aspectului în cauză:

• un număr mare de containere suplimentare (numărul acestora corespunde numărului de coloane - condiție cerută pentru ca metoda să funcționeze).

În ce browsere funcționează?

6.0+	1.0+	9.5+	3.1+	2.0+

• Traducere

Anterior, când totul se făcea folosind tabele, era foarte ușor să creați coloane de aceeași înălțime. Este suficient să creezi un tabel, de exemplu, cu 3 coloane și toate vor avea automat aceeași înălțime. Dar în aspectul blocului, nu totul este atât de simplu.
În acest articol vă voi spune despre câteva modalități de a crea coloane înălțime egalăși compatibilitatea acestor metode cu browsere (inclusiv IE6). Toate aceste metode descriu crearea unui aspect cu 3 coloane.

Metoda 1: Utilizarea afișajului: proprietatea tabelului

Pentru a implementa aspectul, utilizați o listă (ul) sau un bloc div cu blocuri imbricate pentru un rând și fiecare dintre coloane. Încadrarea bloc div i se atribuie afișarea valorii: table , iar fiecărui bloc de coloană imbricat i se atribuie afișarea valorii: table-cell .
Să ne uităm la un exemplu cu o listă.
Cod HTML:

• .....O mulțime de conținut....


• .....O mulțime de conținut....


• .....O mulțime de conținut....

CSS:

.baza(
/*a face 100% lățime și un minim de 1000px lățime*/
latime: auto;
margine-stânga: 0px;
margine-dreapta: 0px;
lățime minimă: 1000px;
umplutură: 0px;
afișaj:tabel;
}
.rând de bază (
Afișaj: masă-rând;
}
.baseli (
afisare: tabel-celula;
latime: 33%;
}
.cell1 (
culoare de fundal: #f00;
}
.cell2 (
culoare de fundal: #0f0;
}
.cell3 (
culoare de fundal: #00f;
}

Avantaje:

Acesta este cel mai simplu și calea ușoară crearea de coloane de aceeași înălțime, spre deosebire de alte metode.
Nu este posibil să se creeze o marjă externă (marjă, cum ar fi spația dintre celule pentru tabele) care să fie egală pentru toate coloanele, totuși, poate fi înlocuită cu un chenar alb(sau culoarea de fundal a coloanei) cu lățimea adecvată pentru a simula indentarea.

Defecte:

Această metodă nu funcționează în browserele IE7 și mai mici. Va trece mult timp (când IE7 devine noul IE6) până să putem folosi în siguranță această metodă.

Metoda 2: Utilizarea JavaScript

Această metodă se bazează pe utilizarea unui cod JS mic (JQuery) care „aranjează” înălțimea dorită pentru fiecare coloană pe baza înălțimii celei mai lungi.
Cod HTML:

… o mulțime de conținut…

…. O mulțime de conținut…

… o mulțime de conținut…

CSS:

.container(
Latime: 900px;
Marja-stânga: auto;
Marja-dreapta: auto;
}
.leftsidebar(
Plutește la stânga;
Latime: 33%;
}
.conţinut(
Plutește la stânga;
Latime: 33%;
}
.bara din dreapta(
Plutește la stânga;
Latime: 33%;
}

JavaScript (jQuery):

funcția setEqualHeight(coloane)
{
var cea mai înaltă coloană = 0;
columns.each(
funcţie()
{
currentHeight = $(this).height();
if(currentHeight > cea mai înaltă coloană)
{
cea mai înaltă coloană = currentHeight;
}
}
);
coloane.înălțime(cea mai înaltă coloană);
}
$(document).ready(funcție() (
setEqualHeight($(".container > div"));
});

Puteți introduce codul JS dosar separatși apelați-l direct în codul HTML. În acest caz, inițializarea JQuery ar trebui să fie situată deasupra codului.
Codul pe care trebuie să-l schimbați este numele clasei de bloc care creează coloanele. În acest exemplu, aceasta este clasa containerului:

Puteți schimba numele clasei bloc de coloană sau chiar adăuga o clasă la fiecare bloc de coloană și le puteți utiliza separat pentru comoditate.

Avantaje:

Principalul avantaj al metodei este că funcționează în toate browserele și nu trebuie să vă deranjați cu codul CSS pentru a alinia înălțimea.

Defecte:

Dacă JavaScript este dezactivat, coloanele nu vor avea aceeași înălțime. Dar, de regulă, acesta este un caz foarte rar, deoarece... Cele mai multe site-uri web moderne necesită activarea JS.

Metoda 3: coloane artificiale

Această metodă a fost una dintre primele care a implementat coloane de aceeași înălțime. Esența sa este că blocului de încadrare i se atribuie un fundal care imită coloanele (vezi figura de mai jos). Ele sunt pur și simplu suprapuse pe acest fundal. Efectul de înălțime egală este creat de un fundal care se repetă.

Cod HTML:

CSS:

.container(
imagine de fundal: tile.png;
background-repeat: repetare-y;
latime: 900px;
margine-stânga: auto;
margine-dreapta: auto;

Bara din stânga(
plutește la stânga;
latime: 200px;
}

Continut (
plutește la stânga;
latime: 400px;
}

Dreapta(
plutește la stânga;
latime: 300px;
}

Mai clar (
clar: ambele;
}

Avantaje:

Implementare foarte simplă.

Defecte:

Această metodă poate fi utilizată numai pentru aspecte/coloane cu lățime fixă.

Metoda 4: Folosirea blocurilor separate cu fundal

Această metodă se bazează pe utilizarea div-urilor separate, fiecare având propriul fundal și ia înălțimea elementului pe care îl conține.
Cod HTML:

…O mulțime de conținut…

…O mulțime de conținut…

…O mulțime de conținut…

CSS:

.dreapta spate(
latime: 100%;
plutește la stânga;
culoare de fundal: verde;
preaplin:ascuns;
poziție:relativă;
}
.contentback(
plutește la stânga;
culoare de fundal: albastru;
latime: 100%;
poziție:relativă;
dreapta: 300px; /* lățimea barei laterale din dreapta */
}
.lasat in urma(
latime: 100%;
poziție:relativă;
dreapta: 400px; /* latimea zonei de continut */
plutește la stânga;
culoare de fundal: #f00;
}

Container (
latime: 900px;
margine-stânga: auto;
margine-dreapta:auto;
}

Bara din stânga(
plutește la stânga;
latime: 200px;
preaplin:ascuns;
poziție:relativă;
stânga: 700px;
}

Continut (
plutește la stânga;
latime: 400px;
preaplin:ascuns;
poziție:relativă;
stânga: 700px;
}

Bara din dreapta (
plutește la stânga;
preaplin:ascuns;
latime: 300px;
culoare de fundal:#333;
poziție:relativă;
stânga: 700px;
}

Nu pare ușor, nu-i așa? Principalul lucru este să înțelegeți 5 puncte principale:

1. .rightback, .contentback și .leftback conțin elementele .leftsidebar, .content și .rightsidebar, care la rândul lor conțin text.
2. Fiecare dintre blocurile imbricate este responsabil pentru culoarea/fondul coloanei. În acest exemplu
   .leftback se întâlnește cu .leftsidebar,
   .contentback – .conţinut
   și .rightback – .rightsidebar.
3. Cu excepția ultimului (responsabil pentru coloana din dreapta), fiecare dintre blocuri
   umplutura din dreapta este setată egală cu lățimea elementului adiacent la dreapta care conține fundalul. În acest exemplu, .contentback (responsabil pentru background.content) este deplasat la stânga cu 300 px (care este lățimea blocului.rightsidebar). (vezi poza de mai jos)
4. Coloanele .leftsidebar, .content și .rightsidebar sunt situate una în spatele celeilalte cu o anumită lățime.
5. Ele oferă indentarea stângă egal cu suma lățimea fiecărei coloane cu excepția celei din dreapta. Acestea. acestea sunt egale=width.rightsidebar(300px) și.content(400px) = 700px.(B+G)

Figura de mai jos arată cum sunt aranjate blocurile .rightback, .contentback și .leftback. Cel din stânga este .rgthback, cel din extrema dreapta este .leftback.

Linia punctată arată zona vizibilă a coloanelor (blocul din spate din dreapta este tăiat cu overflow: ascuns).
În imaginea de mai jos, liniile negre situate sub cele roșii reprezintă conținutul elementelor