blog.nayma.pl


Dla miłośników WordPress, WooCommerce, HTML5, CSS3 oraz JS.

Dariusz Nayma.pl
Autor Wpisu

Podziel się


Tagi


Szybkie wyrównanie 2 div

Dariusz Nayma.plDariusz Nayma.pl

Pewnie nie raz mieliście problem z wyrównaniem dwóch div na ta samą wysokość. Nie zawsze jesteśmy w stanie skorzystać z display:flex. Wtedy z pomocą przyjdzie nam prosta funkcja Java Script, która wyrówna za nas obydwie kolumny. Wystarczy przez zamknięciem znacznika umieścić następujący kod:

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

Pamiętajmy również że każda z kolumn musi mieć dodane odpowiednie klasy: .left oraz .right.

Miejmy nadzieję, że kod przyda się niejednemu z was i ułatwi troszkę życie 😉

A może wy macie równie ciekawe pomysły na wyrównanie 2 kolumn na tą samą wysokość. Podzielcie się z nami waszymi sposobami w komentarzach.

Komentarze