Выравнивание DIV при помощи java

Необходимо на одной странице выровнять несколько блоков по одной высоте, так как в блоках разный текст то автоматически ровняется каждый блок div под свое содержание.
Простой способ выровнять

все блоки на странице при помощи маленького скрипта.

Назовем его vasy.js со следующим содержанием:

function EqualizeColumns(Almist) {
  setTimeout(function() {
      var Blocks = document.getElementsByClassName(Almist);
      var maxHeight = 0;
      for (var i = 0; i < Blocks.length; ++i) {
    Blocks[i].style.height = "auto";
        if (maxHeight < Blocks[i].clientHeight) {
          maxHeight = Blocks[i].clientHeight; 
        }
      }
      for (var i = 0; i < Blocks.length; ++i) {
        Blocks[i].style.height = maxHeight + "px";
      }
    }, 1);
}

 Как видно, скрипт содержит в себе простую функцию EqualizeColumns(), которая вычисляет высоту каждого блока, а затем присваивает всем div-ам максимально найденное значение высоты. Функция ищет и меняет нужные элементы, завязываясь на класс. Это означает, что все блоки, которые вы хотите выровнять, должны иметь одинаковый класс. Например .content

Подключаем скрипт

<script src="/js/vasy.js"></script>

Добавим до или после <body>, content - это наши классы которые нужно выровнять.

<script>
window.onload = EqualizeColumns("content");
</script>

Вот и все.

Если хотите чтобы размер менялся без перезагрузки страницы. Можно еще добавить в body выполнение функции EqualizeColumns() на событие onResize всего документа т.е. в тег <body>:

<body onResize = "EqualizeColumns('equalized_block');">

 

Последние новости