Время чтения: 2 мин. 11 мая 2016 в 9:01 CSS,Javascript
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

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

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

Почему Flexbox?

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

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

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

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

2016-05-11_114403

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

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

[php]
<ul class="list">
    <li class="list__item"><!— content —></li>
    <li class="list__item"><!— content —></li>
    <!— other items —>
</ul>
[/php]

[php]
.list
{
overflow: hidden; /* just clearing floats */
}
.list__item
{
width: 25%; /* 4 items per row */
float: left;
}
[/php]

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

Решение

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

[php]
.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;
}
[/php]

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.

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

[php]
<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>
[/php]

[php]
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;
}
}
[/php]

responsive-equal-height-blocks-5

Похожие статьи

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

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

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

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

Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

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

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

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

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

Комментарий

Получить консультацию

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

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

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

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

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

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

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

Комментарий

Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

Комментарий

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

Введите ваше Skype логин *

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

Выберите программу

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

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

Сообщение

Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течении 10 минут, для обсуждения деталей.


Ваш email

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

Комментарий или вопрос

Проблемы с оплатой?
Опишите ситуацию. Когда возникает проблема? Что планируете купить?

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

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

Что необходимо доработать

Скачать чек-лист
Заполните поля ниже. В течении 10 минут на указанный e-mail будет отправлена ссылка на скачивание чек-листа.

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

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

Предварительная запись для получения скидки
Введите ваше имя, телефон и Skype логин и email. Я свяжусь с Вами для уточнения деталей прохождения курса.

С кого числа Вам удобней начать обучение в 2019 году?

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

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

Выберите программу

Курс SEO для интернет-магазинов

Из данного курса вы узнаете как превратить ваш интернет магазин рабочую лошадку, генерирующую по нарастающей поток клиентов из 300 человек в месяц, в 10 000 в день. С любым ассортиментом.

Особенности продвижения интернет-магазинов, специфика оптимизации. Как избавить себя от рутинной оптимизации каждой страницы и в 1 клик оптимизировать до 10 000 тыс товаров.

А также вы в разы увеличите продажи, значительно снизите стоимость клика и стоимость заявки, в перспективе сможете отказаться от контексной рекламы (только для акций), откроете новые горизонты.

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 30 дней.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

Введите ваше Skype логин *

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

Выберите программу

Курс SEO для корпоративных сайтов

Данный курс поможет вашему бизнесу получить новых клиентов из органического трафика.

А также вы в разы увеличите продажи, значительно снизите стоимость клика и стоимость заявки, в перспективе сможете отказаться от контексной рекламы (только для акций), откроете новые горизонты.

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 20 дней.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

Введите ваше Skype логин *

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

Выберите программу

Курс SEO для Landing Page

Данный курс - находа для вас, если вы хотите увеличить трафик или не хотите использовать контекстную рекламу для продвижения своего продукта или услуги.

Курс научит Вас оптимизировать и продвигать одностраничные сайты.

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 1 день.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

Введите ваше Skype логин *

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

Выберите программу

Курс SEO для самостоятельного обучения

В закрытом разделе моего сайта весь курс представлен в текстовом/видео формате. Если вы желаете обучаться самостоятельно по актуальным данным которые работают в данный момент (поскольку данную информацию я обновляю сразу по мере изменений от поисковых систем) этот курс для вас.

Вы шаг за шагом приведете свой сайт в порядок и сможете увеличить трафик на 500% минимум!!!

Самым важным отличием данного курса от конкурентов является возможность онлайн переговоров со мной лично. Как это работает: вы изучаете урок, у вас появляются вопросы. Вы их записываете, мы созвонимся по скайпу или телефону и я голосом отвечаю на них.

Получить консультацию

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

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

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

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

Комментарий