当高度不同时，具有柔韧性布局的div位置如何相互降低？

问题描述

我有这三个div，我正面临一个问题。当高度不同时，有没有一种方法可以将具有弹性布局的div彼此向下放置？

我的.div-1和.div-3具有相同的width，有一种方法可以将.div-3立即放到.div-1上吗？

这是我的代码：

.container {
      display: flex;
      flex-wrap: wrap;
}
.div1 {
      width: 80%;
      background-color: gray;
      height: 40px;
}
.div2 {
       width: 20%;
       background-color: indigo;
       height: 120px;
}
.div3 {
       width: 80%;
       background-color: red;
       display: grid;
       float: left;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="div1">
        content div 1
      </div>

      <div class="div2">
        content div 2
      </div>

      <div class="div3">
        content div 3
      </div>
    </div>
  </body>
</html>

我该怎么做？

解决方法

请参见此处是否是您想要的：https://codepen.io/larrytherabbit/pen/yLOKbaM

.container {
      display: flex;width:100%;
      flex-wrap: wrap;
}

.subcontainer {
  display:flex;flex-direction:column;width:80%;
}
.div1 {
      width: 100%;
      background-color: gray;
      height: 40px;
}
.div2 {
       width: 20%;
       background-color: indigo;
       height: 120px;
}
.div3 {
       width: 100%;
       background-color: red;
       display: grid;
       float: left;
}

<html>
  <body>
    <div class="container">
      <div class="subcontainer">
      <div class="div1">
        content div 1
      </div>

       <div class="div3">
        content div 3
      </div>
    </div>
      <div class="div2">
        content div 2
      </div>
    </div>
  </body>
</html>

html

当高度不同时，具有柔韧性布局的div位置如何相互降低？

问题描述

解决方法

相关问答