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

Question

首先，这是期望的效果：

没有重新排序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;
   }

<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
 </div>

我也试过左边的浮动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;
   }

<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
 </div>

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

Answer 1

外部容器（要求）

总高度应小于1st div和2nd div的高度。

原因：flex-wrap将提供所需的输出

＆＃13;

＆＃13;

* {
  margin: 0;
}

.outer {
  height: 60vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.two {
  width: calc(100vw - 400px);
  text-align: center;
  font-size: 50px;
  line-height: 100px;
  color: white;
  height: 16vh;
  background: red;
}

.one {
  margin: 0 auto;
  width: 400px;
  text-align: center;
  font-size: 50px;
  line-height: 50vh;
  color: white;
  height: 50vh;
  background: green;
}

.three {
  width: calc(100vw - 400px);
  text-align: center;
  font-size: 50px;
  line-height: 20vh;
  color: white;
  height: 20vh;
  background: orange;
}

.four {
  width: calc(100vw - 400px);
  text-align: center;
  font-size: 50px;
  line-height: 100px;
  color: white;
  height: 23vh;
  background: black;
}

@media only screen and (max-width: 601px) {
  .outer {
    height: 150vh;
  }
  .one {
    order: 2;
    width: 100vw;
  }
  .two {
    order: 1;
    width: 100vw;
  }
  .three {
    order: 3;
    width: 100vw;
  }
  .four {
    order: 4;
    width: 100vw;
  }
}

＆＃13;

<div class="outer">
  <div class="one">2</div>
  <div class="two">1</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为这就是你想要的 - 正如你的问题所述：

• 2列布局
• feather是固定宽度
• 其他人占用剩余可用空间

使用多种方法肯定是可能的，但是flexbox的工作效果和其他方法一样好。只需将.d2从常规流程中移除，即可给出绝对定位。

＆＃13;

＆＃13;

.d2

＆＃13;

.container {
  display: flex;
  flex-direction: column;
}

.d1,
.d3,
.d4 {
  margin-left: 100px;
  height: 50px;
}

.d1 {
  background-color: red;
}

.d2 {
  background-color: yellow;
  position: absolute;
  width: 100px;
  height: 150px;
}

.d3 {
  background-color: blue;
}

.d4 {
  background-color: green;
}

＆＃13;

＆＃13;

＆＃13;

<强>更新

由于下面的评论中提供了其他标准，这里的另一个解决方案不依赖于绝对定位并且将<div class="container"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> </div>保留在事物流中。在这种类型的布局中，.d2的固定宽度在网格的第1列定义中指定：

＆＃13;

＆＃13;

.d2

＆＃13;

.container {
  display: grid;
  grid-template-columns: 200px auto;
}

.d1,
.d3,
.d4 {
  grid-column-start: 2;
}

.d1 {
  background-color: red;
  
}

.d2 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  background-color: yellow;
  height: 150px;
}

.d3 {
  background-color: blue;
}

.d4 {
  background-color: green;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

不完美，但你可以从这里开始。 Fiddle

＆＃13;

＆＃13;

.flex div {
  padding:1em;
  width:100%;
  left:400px;
  box-sizing:border-box; 
}

.flex {
  display:flex;
  flex-direction: column;
  position: relative;
}

#div-1 {background:red;float:right; }
#div-2 { min-height: 300px; order: 1; background:yellow;}
#div-3 { order: 3; background:lime;}
#div-4 { order: 4; background:skyblue;}

@media (min-width:500px) {
  .flex { flex-direction: row; flex-wrap: wrap;}
  #div-1 { order: 2; width:calc(100% - 400px); height: 100px }
  #div-2 { width: 400px; }
  #div-3 { width:calc(100% - 400px); position: absolute; top: 100px; right: 0;height:100px; }
  #div-4 { width:calc(100% - 400px); position: absolute; top: 200px; right: 0;height:100px; }  
}

＆＃13;

<div class="flex">
  <div id="div-1">1</div>
  <div id="div-2">2</div>
  <div id="div-3">3</div>
  <div id="div-4">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;