CSS 中的条件多列

Question

我有一个包含一些子菜单的菜单，就像这个

.menu {
  position: absolute;
  background: yellow;
  margin-top: 2em;
}
header {
  font-size: 20px;
}
ul {
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 10px;
  list-style: none;
  padding: 0;
}
li:nth-child(odd) {background: lightblue; }
li:nth-child(even) {background: lightyellow; }
div:not(.main) {
  display: inline-block;
  position: relative;
}

<div>menu one
  <div class="menu">
    <header>menu one header</header>
    <ul>
      <li>Item one</li>
      <li>Item two 2</li>
      <li>Item tree</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>six</li>
      <li>Item 7</li>
    </ul>
  </div>
</div>
<div>menu two</div>

仅当.menu>ul列表中有 4 个以上的条目时，我才需要显示 2 列。

是否可以使用纯 CSS？

Answer 1

我们可以做数量查询，只是有订单问题。如果您同意该订单，我们可以使用数量查询。

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  width: 40%;
  border: 1px solid red;
  margin: 2px;
}

ul li:nth-last-child(n+5),
ul li:nth-last-child(n+5)~li {
  float: left;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

在 jsFiddle 上查看