css - 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

您可以使用此处描述的技巧 - http://alistapart.com/article/quantity-queries-for-css , @Jesse Kernaghan in the comments above 建议.

但是，为了能够做到这一点，您需要硬连线一些事情:

1. 固定容器ul的高和宽，
2. 固定li 的高度并确保此宽度乘以n 等于容器ul 的高度。其中 n 是您的魔数(Magic Number)，在您的例子中是 4。

这是必需的，这样 CSS columns 就不会重排内容，并且 li 以可预测的方式排列到列中。

如果您的标记和用例可以使用上述两个约束，那么您可以使用以下 CSS 选择器:

li:nth-last-child(4):first-child, 
li:nth-last-child(4):first-child ~ li {
  width: 160px;
}

第一个选择器将选择 li，它是倒数第 4 个 ，也恰好是第一个，有效地只选择第一个 li 在一组恰好四个 li 中，其中 4 是您的魔数(Magic Number)。

第二个选择器(通用兄弟组合器)将选择第一个选择器之后存在的所有 li。

对这些 li 应用固定宽度，使一列看起来仿。

示例片段:

div.menu {
  display: inline-block; vertical-align: top;
  background: yellow; margin: 2em 1em;
}
header { font-size: 20px; }
ul {
  width: 160px; -moz-columns: 2 auto; -moz-column-fill: auto;
  -webkit-columns: 2 auto; columns: 2 auto;
  list-style: none; padding: 0; height: 8em;
}
li { height: 2em; }
li:nth-child(odd) {background: lightblue; }
li:nth-child(even) {background: lightyellow; }

li:nth-last-child(4):first-child, li:nth-last-child(4):first-child ~ li {
  width: 160px;
}

<div class="menu">
  <header>menu one</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 class="menu">
  <header>menu two</header>
  <ul>
    <li>Item one</li>
    <li>Item two 2</li>
    <li>Item tree</li>
    <li>Item four</li>
  </ul>
</div>
<div class="menu">
  <header>menu three</header>
  <ul>
    <li>Item one</li>
    <li>Item two 2</li>
    <li>Item tree</li>
    <li>Item four</li>
    <li>Item five</li>
  </ul>
</div>