我有这三个 div，但遇到了问题。当具有不同高度时，有没有办法将具有 flex 布局的 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 - 当具有不同高度时，如何将具有 flex 布局的 div 彼此向下放置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63822303/