CSS 列数列表问题

Question

我有一个从数据库中回显的列表，并将其列数设为 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>

Answer 1

将 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/

CSS 列数列表问题

CSS Column-count list issue

css

column-count