+7-499-70-300-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Спасибо за оставленную заявку
Ожидайте звонка

Колонки отзывчивый одинаковой высоты на основе Flexbox и JavaScript

CSS,Javascript

В основе мы будем использовать Flexbox в качестве основного варианта, и JS в качестве запасного варианта.

Почему Flexbox?

Flexbox Layout модуль был разработан для решения проблем колонок одинаковой высоты. Это эффективный и гибкий способ управления, всеми видами макетов.

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

Flexbox мгновенно и JavaScript занимает всего несколько секунд. Тем не менее, этот случай JavaScript идеально подходит для людей, которые используют старые версии браузеров, которые не поддерживают Flexbox.

Здесь описано, какие браузеры поддерживают flexbox — http://caniuse.com/#search=flex или смотрите фото ниже.

2016-05-11_114403

Поддержка браузерами Flexbox

Проблемный вариант

<ul class="list">
    <li class="list__item"><!-- content --></li>
    <li class="list__item"><!-- content --></li>
    <!-- other items -->
</ul>
.list
{
    overflow: hidden; /* just clearing floats */
}
    .list__item
    {
        width: 25%; /* 4 items per row */
        float: left;
    }

flexbox-based-responsive-equal-height-blocks-with-javascript-fallback-1

Решение

Если вы не имели дело с с Flexbox, вы будете удивлены, как это работает. Дисплей: Flex инициирует Flexbox для элемента контейнера и биоэтанол оберткой: обертка говорит, чтобы обернуть дочерние элементы, а не подогнать их на одну строку. Повторяя дисплей: Flex для дочерних элементов гарантирует, что элементы имеют одинаковую высоту в своих рядах.

.list
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
 
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
    .list__item
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

flexbox-based-responsive-equal-height-blocks-with-javascript-fallback-2

Это отлично работает в последних версиях Chrome, Android, Safari, Opera, Firefox и Internet Explorer 10+. Для остальных у меня есть таблетки JavaScript.

Я не включил это в предыдущем коде CSS, но некоторые из старых браузеров WebKit поддерживает старый синтаксис Flexbox ( дисплей: -webkit-бокс ). Тем не менее, обертка собственность -webkit-box-линии: несколько просто не работает на ОС IOS Safari 6.1- ни на Android 4.3-.

JavaScript запасной вариант

Эта часть охватывает замещающее решение для таких браузеров , как Internet Explorer, 9- Android 4.3-, 6.1- ОС IOS Safari и Opera Mini. Я написал небольшой кусочек JQuery кода зависящему , который:

1. Обнаруживает, если браузер не поддерживает Flexbox;
2. Рассчитывает количество элементов в строке путем деления ширины .list и .list__item ;
3. Практически делит список на строки соответственно к этому числу;
4. Обнаруживает, какой элемент имеет самый большой высоты в каждой строке;
5. Устанавливает эти высоты для других элементов в каждой строке соответственно.

Что делать , если JavaScript отключен в браузере? Проблема заключается в том, что нативный функция обнаружения CSS является менее поддерживается , чем сама Flexbox. Поэтому, используя @support правило не распространяется на каждый браузер , который поддерживает Flexbox. Но это лучше , чем ничего.

То , что я предлагаю , чтобы относиться к вещам так: отключен JavaScript = нет Flexbox поддержки (я считаю , что это равенство в основном правильно) и исправить исключения с помощью @support . Технически, добавить имя класса .no-JS к тег и удалите его с помощью JavaScript. Вот как мы будем знать , если он отключен или нет. Затем стиль элементы списка , соответственно , и , наконец , «компенсировать» этот стиль с помощью @supports.

Я решил представить блоки как полную ширину строк в этом случае. Если есть какие-либо изображения, они будут выровнены по правому краю строки на больших экранах.

<html class="no-js">
    <head>
        <!-- your stuff -->
        <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")})(document,window,0);</script><!-- remove this if you are using Modernizr -->
    </head>
    <!-- your stuff -->
</html>
html.no-js .list__item
{
    width: 100%;
    float: none;
}
    html.no-js .list__item img
    {
        max-width: 9.375rem; /* 150 */
        float: right;
        margin-left: 1.25rem; /* 20 */
    }
 
@supports ( display: -webkit-flex ) or ( display: flex )
{
    html.no-js .list__item
    {
        width: 25%;
        float: left;
    }
        html.no-js .list__item img
        {
            max-width: none;
            float: none;
            margin-left: 0;
        }
}

responsive-equal-height-blocks-5

Другие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка