Фиксированное количество столбцов CSS независимо от количества детей без FlexBox

Question

В основном, я хочу повторить col-6 (или же col-x) поведение Bootstrap без использования FlexBox,

DIV, что все его дочерние элементы спарены и обернуты, а когда он удален, он перестраивается.

Например, если я удалю Child 2:

--------------------------------
| Child 1 with |               |
|  Very long   |    Child 2    |
|    Text      |               |
--------------------------------
|   Child 3    |    Child 4    |
--------------------------------

Это должно произойти:

--------------------------------
| Child 1 with |               |
|  Very long   |    Child 3    |
|    Text      |               |
--------------------------------
|   Child 4    |
----------------

Важно, чтобы он работал с элементами разной высоты!

Я не уверен, какой пример кода я могу опубликовать здесь, я знаю, как это сделать с помощью FlexBox, но я не могу использовать его, так как использую PDF, создавая библиотеку, которая не полностью поддерживает FlexBox, поэтому я пробую разные подходы, пока не воспроизведу то, что мне нужно.

Answer 1

Я бы предложил использовать не основанный на flexbox фреймворк, такой как bootstrap 3 или skeleton. однако, если вы просто хотите получить то, что описали в вопросе, вы можете просто использовать display inline-block.

.box {
 height:50px;
 background: indianred;
 width:48%;
 display: inline-block;
}
.box1 {
 background: indianred;
}
.box2 {
 background: steelblue;
}
.box3 {
 background: coral;
}
.box4 {
 background: cadetblue;
}

<div class="box box1">BOX 1</div>
<div class="box box2">BOX 2</div>
<div class="box box3">BOX 3</div>
<div class="box box4">BOX 4</div>

<hr>

<div class="box box1">BOX 1</div>
<!-- <div class="box box2">BOX 2</div> -->
<div class="box box3">BOX 3</div>
<div class="box box4">BOX 4</div>