html - 强制下一个 div 转到下一行

Question

我有这样的结构:

.divParent{
  height: 100px;
}

.div1 {
  height: 40px;
  background: blue;
}

.div2{
  height: 150px;
  background: yellow
}

<div class="divParent">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>
<div class="divNew">
  <span>Hello</span>
</div>

我要divNew转到下一行并且不会被 divParent 的内容重叠.我尝试了很多东西，但没有任何效果。

我知道，我可以使用 <br />标记来执行此操作，但我不想使用它。有没有其他解决办法。

Answer 1

使用flex

.divParent{
  clear:both;
  height: 100px;
}

.div1 {
  height: 40px;
  background: blue;
}

.div2{
  height: 150px;
  background: yellow
}
.divParent, .divNew {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.divNew { 
  background:red;
} 

<div class="divParent">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>
<div class="divNew">
  <span>Hello</span>
</div>