CSS скрытые элементы с: нечетный псевдо - селектор

Question

Задача состоит в том, чтобы создать самонастраивающуюся css-сетку с 3 основными требованиями:

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>

Здесь у нас есть зеленый блок, уложенный на левую границу вместо замены скрытого второго блока справа от первого блока платного контента, где мы получаем пустое место. Насколько я знаю, проблема в том, что: нечетный псевдоселектор включает скрытые элементы.

Есть ли у нас к настоящему моменту способ использования скрытых элементов при перекомпоновке?

PS извините за ужасный язык

Answer 1

Вы можете использовать CSS flex блочная модель для разметки табличной структуры. Ключ здесь 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>

Answer 2

:odd селектор не будет заботиться о видимости элемента...

Так как вы используете класс для скрытых элементов, вы можете очистить float, основываясь на существовании (или нет) этого .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>