В основе мы будем использовать Flexbox в качестве основного варианта, и JS в качестве запасного варианта.
Почему Flexbox?
Flexbox Layout модуль был разработан для решения проблем колонок одинаковой высоты. Это эффективный и гибкий способ управления, всеми видами макетов.
Высота колонок выстраивается моментально, и не требует почти никакого промежутка времени для сработки. В случае решения JavaScript требуется время, чтобы загрузить документ, а затем загрузить соответствующий файл JS, и, если таковые имеются, загружать изображения в блоках.
Flexbox мгновенно и JavaScript занимает всего несколько секунд. Тем не менее, этот случай JavaScript идеально подходит для людей, которые используют старые версии браузеров, которые не поддерживают Flexbox.
Здесь описано, какие браузеры поддерживают flexbox – https://caniuse.com/#search=flex или смотрите фото ниже.
Поддержка браузерами 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, вы будете удивлены, как это работает. Дисплей: 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]
Это отлично работает в последних версиях 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]
