带有 :odd 伪选择器的 CSS 隐藏元素

Question

任务是创建具有 3 个主要要求的自动调整 CSS 网格：

1. 绝对是 javascript - 免费
2. 具有表格 - 布局行为（行中的单元格相对于基线垂直对齐）并且可能具有不同的高度。
3. 某些单元格可能会被不同的 css 规则隐藏起来。并且网格必须依靠这一点并进行适当的回流以通过可见块填充空单元格。

这里是示例模型：

.green {
  background: green;
}
.hidden {
  display: none;
}
li {
  background: red;
  display: block;
  width: 50%;
  color: #fff;
  font-size: 20px;
  float:left;
}
li:nth-child(odd) {
  clear:left;
}

<ul>
  <li>1st block<br>toll<br>content</li>
  <li class="hidden">short<br>2nd block</li>
  <li class="green">3rd block</li>
  <li class="hidden">4d block</li>
  <li>5th column</li>
  <li>6th block</li>
</ul>

在这里，我们将绿色块堆叠到左边框，而不是替换隐藏在第一个收费内容块右侧的第二个块，在那里我们得到空白空间。 我只知道问题在于 :odd 伪选择器包含隐藏元素。

我们现在是否有任何可用的方法来考虑回流中的隐藏元素？

附：对不起，糟糕的语言

Answer 1

您可以使用 CSS flexbox 模型来布局表格结构。这里的关键是项目的flex-basis 属性。使其等于宽度，即在这种情况下为 50%，强制采用两列布局。这里还需要flex-wrap: wrap 属性。

看到这个 sn-p：

ul {
  list-style: none;
  margin:0; padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 75%;
  }

.green {
  background: green;
}
.hidden {
  display: none;
}
li {
  flex: 0 0 50%;
  background: red;
  display: block;
  width: 50%;
  color: #fff;
  font-size: 20px;

}

<ul>
  <li>1st block<br>toll<br>content</li>
  <li class="hidden">short<br>2nd block</li>
  <li class="green">3rd block</li>
  <li class="hidden">4d block</li>
  <li>5th column</li>
  <li>6th block</li>
</ul>

Answer 2

:odd 选择器不会关心项目的可见性...

由于您使用的是隐藏元素的类，因此您可以根据 .hidden 类的存在（或不存在）来清除浮动，例如：

li:not(.hidden) + li:not(.hidden) {
   clear:left;
}

只有当它有两个立即跟随的可见项目时才会清除浮动...

见：

.green {
  background: green;
}
.hidden {
  display: none;
}
li {
  background: red;
  display: block;
  width: 50%;
  color: #fff;
  font-size: 20px;
  float:left;
}
li:not(.hidden) + li:not(.hidden) {
  clear:left;
}

<ul>
  <li>1st block<br>toll<br>content</li>
  <li class="hidden">short<br>2nd block</li>
  <li class="green">3rd block</li>
  <li class="hidden">4d block</li>
  <li>5th column</li>
  <li>6th block</li>
</ul>