Можно сделать блоки одинаковой ширины с помощью 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