CSS向右浮动然后向上？

Question

我想知道是否有什么方法可以实现浮动（左或右），使每一个新的开始从边框开始在它上面的元素下面。这是三个元素。

#red-block {
  background-color: red;
  width: 70vw;
  height: 15vh;
}
#blue-block {
  background-color: blue;
  width: 20vw;
  height: 45vh;
}
#green-block {
  background-color: green;
  width: 60vw;
  height: 15vh;
}
div {
  float: right;
}

<div id="red-block">
  red-block
</div>
<div id="blue-block">
  blue-block
</div>
<div id="green-block">
  green-block
</div>

在本例中，绿色块从蓝色块的垂直端之后的右端开始。有没有什么方法可以让它从红色块的底部开始呢？

谢谢，我想知道是否有办法让绿色块从红色块的底部开始？

Answer 1

尝试使用flex。

HTML:

<div id="main-block">
  <div id="blue-block">

  </div>

  <div>

    <div id="red-block">

    </div>
    <div id="green-block">

    </div>
  </div>

</div>

CSS:

#main-block{
  display: flex;
  justify-content: flex-end;
}
#red-block {
  background-color: red;
  width: 70vw;
  height: 15vh;
}
#second-block{
  height: 30vh;
  width: 70vh;
}
#blue-block {
  background-color: blue;
  width: 20vw;
  height: 45vh;
}
#green-block {
  background-color: green;
  width: 60vw;
  height: 15vh;
}