0

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

Есть список, который может быть в две, три или четыре колонки, реализован с помощью флексбокс модели.

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

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

ul.grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
ul li {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0.2rem 0;
}
ul li:before {
  content: "\25CF";
  margin: 0.1rem 10px 0 20px;
  font-size: 0.75rem;
}
ul.grid li {
  padding: 0.2rem 1rem;
}
ul.grid.three-columns li {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.3%;
  -ms-flex: 0 0 33.3%;
  flex: 0 0 33.3%;
}
ul.grid.three-columns li:nth-child(3n+1) {
  padding-left: 0;
}
ul.grid.three-columns li:nth-child(3n) {
  padding-right: 0;
}
<ul class="grid three-columns">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur.</li>
  <li>Lorem ipsum dolor sit.</li>
  <li>Lorem ipsum dolor sit amerem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit.</li>
</ul>

Пример списка

3
  • Посмотрите вот тут - ru.stackoverflow.com/questions/758412/… 20 дек 2017 в 11:01
  • используйте columns
    – soledar10
    20 дек 2017 в 11:08
  • В этом случае нужна фиксированная высота, чтоб элементы упирались и переносились, а предполагается, что контент будет добавляться либо удаляться
    – TemTik
    20 дек 2017 в 11:29

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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