Question

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

一个div，其所有子级都已配对并包裹在一起，一旦删除，它就会重新排列。

例如，如果我删除FlexBox：

Child 2

这应该发生：

--------------------------------
| Child 1 with |               |
|  Very long   |    Child 2    |
|    Text      |               |
--------------------------------
|   Child 3    |    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>

没有FlexBox的CSS固定列数量，无论子项数量如何

1 个答案: