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

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

0 голосов
/ 12 февраля 2019

По сути, я хочу повторить 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, поэтому я пробую разные подходы, пока не скопирую то, что мне нужно.

1 Ответ

0 голосов
/ 12 февраля 2019

Я бы предложил использовать фреймворк, не основанный на 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>
...