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>

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

У нас есть какой-либо способ использования скрытых элементов при переплаве?

P.S. Извините за страшный язык

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 не будет заботиться о видимости элемента ...

Поскольку вы с помощью класс для скрытых элементов, вы можете очистить поплавок на основе существования (или нет) этого .hidden класс, например:

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

очистить бы поплавок только тогда, когда он два immediated последовали видимые элементы ...

См:

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