带有 :odd pseudo - selector 的 CSS 隐藏元素

Question

任务是创建自动调整的 css - 具有 3 个主要要求的网格:

1. 完全免费的 javascript
2. 具有表格 - 布局行为(行中的单元格相对于基线同样垂直对齐)并且可能具有不同的高度。
3. 一些单元格可能会被不同的 CSS 规则隐藏起来。网格必须依靠它并进行适当的回流以用可见 block 填充空单元格。

这里是示例模型:

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

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

我们现在有任何可用的方法来考虑重排中的隐藏元素吗？

附言对不起，糟糕的语言

Answer 1

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

查看此片段:

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>