Делаем блоки одинаковой ширины с помощью Javascript

Можно сделать блоки одинаковой ширины с помощью Flex, можно задать ширину с помощью фиксированных размеров, но есть задача когда, нужно сделать блоки одинаковой ширины, основываясь на размере самого широкого блока. Группы этих блоков могут дублироваться и иметь разные размеры, и наша задача в каждой такой группе найти больший по ширине блок и задать остальным такую же ширину.

В общем, задача понятна, и наш код будет основан на коде из этой статьи Делаем колонки одинаковой высоты с помощью JS.

Примерный исходный код (может быть любой другой):

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#faq-1">Art</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#faq-2">Video</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#faq-3">Photo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#faq-4">Digitalization
</a>
  </li>
</ul>

Код Javascript, с помощью которого находим самый широкий элемент и задаем его ширину для всех остальных элементов. Поиск элементов выполняется по классу .nav-item:

$(function() {
  // Blocks same width
  (function makeTabsSameWidth() {
    function setEqualWidth(tabs) {
      var maxWidth = 0;
 
      tabs.each(function() {
        currentWidth = $(this).outerWidth();
        if (currentWidth > maxWidth) {
          maxWidth = currentWidth;
        }
      });
 
      tabs.width(maxWidth);
    }
    setEqualWidth($(".nav-item"));
  })();
});

Рабочий пример скрипта, который задает всем блокам одинаковую ширину:

See the Pen Blocks Same Width with JS by Denis (@deniscreative) on CodePen.0

Анимированная рамка с градиентом с помощью SVG

В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это…

Минификация и сжатие HTML в GULP 4

Уменьшаем вес файлов HTML — для этого убираем все переносы и лишние пробелы, а так…

Создание и использование Source Maps для css и js в GULP 4

Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не…

Создание спрайтов в GULP 4 с поддержкой Retina

Для оптимизации запросов на сервер можно объединить иконки и небольшие картинки, которые используются в css,…

Ответить