Делаем блоки одинаковой ширины с помощью 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
В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это…
Уменьшаем вес файлов HTML — для этого убираем все переносы и лишние пробелы, а так…
Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не…
Для оптимизации запросов на сервер можно объединить иконки и небольшие картинки, которые используются в css,…