Jak wyrównać kilka DIV
Niedawno przedstawiłem Wam ciekawy i prosty skrypt na wyrównanie wysokości 2 div. Jak dobrze wiecie takie rozwiązanie ma dość duże ograniczenie, bo często potrzebujemy wyrównać wysokość kilku div a czasami nawet w rożnych miejscach. Nie zawsze jesteśmy w stanie skorzystać z display: flex; i dlatego przedstawiam Wam inny dużo lepszy skrypt do wyrównania wysokości dowolnej ilości DIV. Jego instalacja jest bardzo prosta a sam kod jest bardzo prosty i lekki.
Dodajemy skrypt do naszej strony
Najpierw dodajemy do naszej strony bibliotekę jQuery:
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
UWAGA !! Sprawdź czy nie masz juz podpiętej biblioteki jQuery i czy jest to wersja 3.x.x. Ten skrypt nie działa prawidłowo z niższymi wersjami jQuery.
Dodajemy prosty kod JS zawsze po wczytaniu biblioteki jQuery:
(function($) {
$.fn.equalHeights = function() {
var maxHeight = 0,
$this = $(this);
$this.each( function() {
var height = $(this).innerHeight();
if ( height > maxHeight ) { maxHeight = height; }
});
return $this.css('height', maxHeight);
};
$('[data-equal]').each(function(){
var $this = $(this),
target = $this.data('equal');
$this.find(target).equalHeights();
});
})(jQuery);
Następnie dodajemy kod:
<script>
$('.klasa').equalHeights();
</script>
gdzie .klasa zastępujemy klasą DIV, którego wysokość chcemy wyrównać. Oczywiście możemy to zrobić dla wielu różnych klas jednym skryptem:
<script>
$('.klasa-1').equalHeights();
$('.klasa-2').equalHeights();
$('.klasa-3').equalHeights();
</script>
Podsumowanie
To proste rozwiązanie na pewno przyda się nam w miejscach w których implementacja Flex Box byłaby dość trudna lub zepsuła nam układ strony. Ja np. wykorzystałem go niedawno w szablonie WordPress, gdzie właśnie użycie flexa wpływało dość mocno na strukturę szablonu i trzeba było się wspierać innymi rozwiązaniami takimi jak te powyższe. Te rozwiązanie możemy używać zarówno na stronach HTML jak i CMS takich jak Joomla czy WordPress.
