Question

任务是创建具有3个主要要求的自动调整css - grid：

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

这里是示例模型：

＆＃13;

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

＆＃13;

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

＆＃13;

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

我们现在有什么可用的方法来考虑回流中隐藏的元素吗？

P.S。抱歉可怕的语言

Answer 1

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

请参阅此代码段：

＆＃13;

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;

}

＆＃13;

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

＆＃13;

Answer 2

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

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

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

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

请参阅：

＆＃13;

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

＆＃13;

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

＆＃13;

CSS隐藏元素：奇数伪选择器

2 个答案: