Css 固定列数量，不考虑子项计数，没有 FlexBox

Question

基本上，我想在不使用FlexBox 的情况下复制Bootstrap 的col-6（或col-x）行为。

一个 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 或骨架。但是，如果您只想要问题中描述的内容，那么您可以使用显示内联块。

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