Порядок вывода блоков при изменении разрешения

224

10 декабря 2021, 22:20

Подскажите с решением задачи. Есть столбцы с городами в алфавитном порядке - скрин шаблона При изменении разрешения, правый блок переносится вниз и тогда получается буква "Д", под столбцом "А". А надо чтобы колонка с буквой "Б" ушла под "А" и дальше порядок сохранился - скрин шаблона. Можно выводить в столбце фиксированное количество городов, но они добавляются динамически и сколько на какую букву их будет неизвестно.

Answer 1

Поскольку в комментах мы с Вами выяснили, что можно сделать обычным списком, то вот Вам примерный рабочий вариант. Если надо на чистом css, то можно "костылить" с медиа-запросами (на разные размеры экрана задавать разное количество колонок).

Я сделал с помощью jQuery (количество колонок меняется динамически при ресайзе или повороте экрана):

$(document).ready(function(){ 
 
  function setColumnCount(){ //создаём функцию, которая будет задавать количество колонок 
    let labelWidth = 0; //переменная, в которую запишем самый длинный город 
    $('label').each(function(){ //в цикле проходим по городам 
      if($(this).outerWidth() > labelWidth){ 
        labelWidth = $(this).outerWidth(); //находим самый длинный 
      } 
    }); 
    let wrapWidth = $('.wrapper').outerWidth(); //находим длину блока-обёртки 
    $('.wrapper').css('column-count', Math.floor(wrapWidth/(labelWidth))); //задаём количество колонок 
  } 
   
  setColumnCount(); //запускаем функцию при загрузке 
   
  $(window).on('resize orientationchange', function(){  
    setColumnCount(); //запускаем функцию при ресайзе или повороте экрана 
  }); 
 
});

.wrapper { 
  list-style: none; 
  padding: 10px; 
  border: 1px solid red; 
} 
label { 
  white-space: nowrap; 
  display: inline-block; 
  padding: 2px 5px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="wrapper"> 
  <li><label><input type="radio" name="city" />Город 1</label></li> 
  <li><label><input type="radio" name="city" />Город 02</label></li> 
  <li><label><input type="radio" name="city" />Город 003</label></li> 
  <li><label><input type="radio" name="city" />Город 4</label></li> 
  <li><label><input type="radio" name="city" />Город 05</label></li> 
  <li><label><input type="radio" name="city" />Город 006</label></li> 
  <li><label><input type="radio" name="city" />Город 7</label></li> 
  <li><label><input type="radio" name="city" />Город 08</label></li> 
  <li><label><input type="radio" name="city" />Город 9</label></li> 
  <li><label><input type="radio" name="city" />Город 10</label></li> 
  <li><label><input type="radio" name="city" />Город 011</label></li> 
  <li><label><input type="radio" name="city" />Город 0012</label></li> 
  <li><label><input type="radio" name="city" />Город 13</label></li> 
  <li><label><input type="radio" name="city" />Город 014</label></li> 
  <li><label><input type="radio" name="city" />Город 00015</label></li> 
  <li><label><input type="radio" name="city" />Город 016</label></li> 
  <li><label><input type="radio" name="city" />Город 17</label></li> 
  <li><label><input type="radio" name="city" />Город 0018</label></li> 
  <li><label><input type="radio" name="city" />Город 19</label></li> 
  <li><label><input type="radio" name="city" />Город 020</label></li> 
  <li><label><input type="radio" name="city" />Город 21</label></li> 
  <li><label><input type="radio" name="city" />Город 22</label></li> 
  <li><label><input type="radio" name="city" />Город 00023</label></li> 
  <li><label><input type="radio" name="city" />Город 24</label></li> 
  <li><label><input type="radio" name="city" />Город 0025</label></li> 
  <li><label><input type="radio" name="city" />Город 026</label></li> 
  <li><label><input type="radio" name="city" />Город 27</label></li> 
  <li><label><input type="radio" name="city" />Город 28</label></li> 
  <li><label><input type="radio" name="city" />Город 0029</label></li> 
  <li><label><input type="radio" name="city" />Город 30</label></li> 
</ul>