Question

我有一个固定宽度和宽度的div高度。我需要一个从上到下的列表，当有高度的空间时，它会正确。列表工作的常规方式是从左到右，当宽度没有空间时，有一个换行符并继续......

原因很简单我需要按ABC排序列表并且喜欢：

A   B
ABC BCD
ABD BCE

而不是：

A ABC ABD
B BCD BCE

HTML结构：

<ul class="lists" id="practice">
  <li><a href="">Arbitration &amp; Mediation</a></li>
  <li><a href="">Banking &amp; Finance</a></li>
  <li><a href="">Capital Markets</a></li>
  <li><a href="">China Desk</a></li>
  <li><a href="">Class Actions &amp; Derivative Suits</a></li>
  <li><a href="">Competition &amp; Antitrust</a></li>
  <li><a href="">Environmental</a></li>
</ul>

Answer 1

对于年轻的浏览器，您可以使用nth-child和float或column-count / width /...

DEMO使用您的结构：http://codepen.io/anon/pen/ifqlz

ul, li {
  padding:0;
  margin:0;
  width:30em;
  margin:auto;
}
hr {
  clear:both
}
li {overflow:hidden;width:15em;}
.lists li {
  float:left;
  clear:left;
}
.lists li:nth-child(4) ~ li{/* here cause 7/2 (round up/math.ceil()) is 4 */
float:none;
  clear:none;
}
.listsbis {
  column-count:2;
  column-gap:0;
  column-width:15em;
}

对于较旧的浏览器，您将需要javascript或像砌体这样的脚本。 http://masonry.desandro.com/

从上到下排序列表，而不是从左到右

1 个答案: