html图片3个一列,html – 如何使用CSS将4个div中的3个从一列移动到新列？

首先,这是期望的效果：

没有重新排序div的布局：

重新排序div后的布局

2是固定宽度. 1,3,4都是可弯曲的,可以是任何宽度.

我尝试过使用flexbox,但重新排序后它们不会在2个cols中布局.

.container { display: flex; flex-wrap: wrap; width: 700px; }

.d1 {

order: 2;

background-color: red;

}

.d2 {

order: 1;

background-color: yellow;

}

.d3 {

order: 3;

background-color: blue;

}

.d4 {

order: 4;

background-color: green;

}

.d1,.d2,.d3,.d4 {

padding: 20px;

font-size: 20px;

font-weight: bold;

border: 1px solid black;

width: 300px;

height: 50px;

}

.d2 {

height: 200px;

}

1

2

3

4

我也试过浮动2到左边,但它不会使1,3和4占据容器的所有其余可用空间. (它需要在任何容器宽度处这样做)

.container { position: relative; width: 900px; border: 1px solid black; }

.d1 {

float: right;

background-color: red;

}

.d2 {

float: left;

background-color: yellow;

}

.d3 {

float: right;

background-color: blue;

}

.d4 {

float: right;

background-color: green;

}

.d1,.d2,.d3,.d4 {

padding: 20px;

font-size: 20px;

font-weight: bold;

border: 1px solid black;

width: 300px;

height: 50px;

}

.d2 {

height: 200px;

}

1

2

3

4

我忘了提到所有这些都在另一个需要高度内容的容器内