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列数列表问题

1 个答案: