时间戳

首页 > 解决方案 > CSS列数列表问题

css - CSS列数列表问题

问题描述

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

标签： csscolumn-count

解决方案

设置li displaytoinline-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/

推荐阅读