0

Есть такая таблица элементов:

<div class="grid">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
...
</div>

Получается грид в 4 элемента на 2 строки.

Сейчас с адаптивом все элементы просто сдвигаются в зависимости от ширины экрана, до тех пор пока не останется по 1 в строчке. Но задача стоит следующая: в мобильной версии сделать просто скролл этих строк. Казалось бы решается только этим: display: flex; overflow: scroll; Но это дает мне одной строку скролла, а не две. Я бы разделил этот грид на два, но это невозможно, каждый элемент .el генерится самой cms, поэтому я имею в распоряжении код с php типа:

<div class="grid">
<div class="el">
/*много php*/
</div>
</div>

Есть ли какое-то решение этой задачи? Может на php или js?

1 ответ 1

1

Ну, теоретически 2 грида можно создавать с помощью js "на лету" и в цикле заполнять их элементами:

const els = document.querySelectorAll('.el');

const wrap1 = document.createElement('div');
const wrap2 = document.createElement('div');
wrap1.setAttribute('class', 'grid');
wrap2.setAttribute('class', 'grid');

for(let i=0; i<els.length; i++) {
  if(i<els.length/2) {
    wrap1.innerHTML += els[i].outerHTML;
    els[i].parentNode.replaceChild(wrap1, els[i]);
  }
  else {
    wrap2.innerHTML += els[i].outerHTML;
    els[i].parentNode.replaceChild(wrap2, els[i]);
  }
}
.grid {
  display: flex;
}
.el {
  width: 200px;
  height: 50px;
  border: 1px solid red;
  margin: 5px;
  padding: 10px;
  font-size: 20px;
}
<div class="el">контент 1</div>
<div class="el">контент 2</div>
<div class="el">контент 3</div>
<div class="el">контент 4</div>
<div class="el">контент 5</div>
<div class="el">контент 6</div>
<div class="el">контент 7</div>
<div class="el">контент 8</div>

2
  • Почему-то не воспринимает этот код, ошибка где-то здесь if(i<els.length/2)
    – DanBi
    18 янв 2019 в 12:34
  • @StanDan, ну, здесь же всё работает - значит, какая-то проблема на Вашей стороне 18 янв 2019 в 12:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.