Проблема с подсчетом столбцов в CSS - PullRequest
Новая
       49

Проблема с подсчетом столбцов в CSS

0 голосов
/ 11 января 2019

У меня есть список, эхом выводимый из базы данных, и ему присвоено количество столбцов, равное 2. На странице будет напечатано около 20 элементов списка. Отлично, за исключением того, что когда я дохожу до конца страницы, последний элемент разбивается, и часть элемента списка затем переходит в верхнюю часть второго столбца. У кого-нибудь еще была похожая проблема или есть лучшее решение для предотвращения разрыва? 

p.br {
  margin-top: -15px;
}
.li-2col, .li-2col-roh {
  break-inside: avoid;
  padding-top: 10px;
  padding-bottom: 10px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  margin-left: 50px;
}
<ul class="li-2col-roh">
  <li class="roh-list">
    <p>Persons name with some details</p>
    <p class="br">some details</p>
    <p class="br">More details</p>
    <p class="br">More details for this person</p>
  </li>
</ul>

1 Ответ

0 голосов
/ 11 января 2019

Установка li display на inline-block должна выполнить то, что вам нужно. 

p.br {
  margin-top: -15px;
}
.li-2col, .li-2col-roh {
  break-inside: avoid;
  padding-top: 10px;
  padding-bottom: 10px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  margin-left: 50px;
}

.li-2col-roh li {
  display: inline-block;
}
<ul class="li-2col-roh">
  <li class="roh-list">
    <p>Persons name with some details</p>
    <p class="br">some details</p>
    <p class="br">More details</p>
    <p class="br">More details for this person</p>
  </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus aliquam voluptate, vero quod ex hic, asperiores repellendus itaque dolorem fugit dolorum distinctio neque porro sequi aut deserunt. Eos, eum, sapiente!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime explicabo, omnis optio sint provident. Voluptas dignissimos eum accusantium similique, voluptate aliquam libero labore harum quae. Aspernatur laborum eligendi ex repellendus!</li>
</ul>

http://jsfiddle.net/h15bk6dw/1/

...