• Гость
For-Web
  • Главная
  • Инфо
    • Блог
    • О проекте
    • Обратная связь
    • Пользователи
    • Статистика
    • Объявления на сайте
    • Партнёрство
    • Инвестиции
  • Вебмастеру
    • SQL
    • PHP
    • JavaScript
    • CSS
    • HTML
    • Программы
    • Литература
  • Скрипты сайтов
    • Bitcoin
    • Fruit Farm
    • Игры на деньги
    • Движки сайтов
    • Соц сети
    • Обмен визитами
    • Платный раздел
    • Скрипты буксов
    • Скрипты рекламы
    • Интернет магагзин
    • Браузерные игры
    • Хайпы, Пирамиды
    • Скрипты CSGO
  • Data Life Eingine
    • Шаблоны
    • Модули
    • Хаки
  • Bootstrap
    • Шаблоны
    • Плагины
    • Сниппеты
  • Дизайн и Графика
    • PSD макеты
    • Mocups Fre
    • Иконки, Кнопки
    • Шрифты,Текст
    • Текстуры, Фон
    • Анимация
    • Формы
    • Палитра
    • Галерея
    • Раскладка
    • Модальное окно
    • Элементы загрузки
    • Меню и навигация
    • Украшения для сайта
  • Шаблоны сайтов
    • HTML шаблоны
    • Админка
    • Автомобили
    • Аниме
    • Блоги
    • Игровые
    • Женские
    • Заглушки
    • Кинопорталы
    • Кулинарные
    • Лендинг
    • Мобильные
    • Музыкальные
    • Новостные
    • ПО
    • Портфолио
    • Природа
    • Строительство
    • Спорт
    • Хостинг
    • Адалт
    • Страницы 404

Идеальный выбор начинающих и небольших сайтов

Главная » JavaScript » Делаем блоки div одинаковой высоты JS

Делаем блоки div одинаковой высоты JS



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

Допустим у нас адаптивный сайт с выводом новостей в 2 ряда, блоки с новостями разной высоты в зависимости от содержимого.
Нам нужно выровнять все блоки по высоте самого высокого, так вот данный скрипт сделает это, и при адаптации сайта блоки вытягиваются в один ряд ровненько ;)
 Знаю, есть куча способов реализовать это, но по мне это самый надежный и удобный способ.

Установка.
Подключаем наш скрипт:

<script type="text/jаvascript">
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".columns > div"));
});
</script>

Теперь все блоки с классом "columns" будут одинаковой высоты.
Я например, применил такой скрипт в owl карусели. Надеюсь статейка вам пригодится  wink


  • Комментарии
  • О статье
  • Похожие новости
У данной публикации нет комментариев.

admin

Автор

8-12-2019, 22:24

Дата пуликации

JavaScript

Категория
  • Комментариев: 0
  • Просмотров: 11
Bootstrap сниппеты
Bootstrap Блоки одинаковой высоты
Блог
Как создать раскрученный сайт
Меню, навигация
Эффект раздвижных шторок
Инвестиции
Бот для 999Dice
Украшения для сайта
Скрипт снежинок для сайта
Украшения для сайта
Скрипт падающих снежинок на сайт DLE
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Реклама

 
Комментарии
Интересная статья. У вас есть что почитать и узнать нового) 
14 декабря 2018 00:53

RobinS.

Если вам понравилась статья то , обязательно поделитесь ей со своими друзьями, ведь возможно кто то из них в данный момент тоже ищет подобный скрипт
11 марта 2018 21:18

admin


Как обозначается тег в HTML
Ваша реклама
Купить ссылку здесь за руб.
Поставить к себе на сайт
 

Авторизация

Регистрация Забыл пароль