html - 在容器内安排 Div

Question

我是一名花商，所以当我的插花知识无法转化为 div 布置 html 样式时，我和你一样感到惊讶。或许您可以提供帮助。

这是 html:

<div id="blocks">
  <div id="block0"></div>
  <div id="block1"></div>
  <div id="block2"></div>
  <div id="block3"></div>
  <div id="block4"></div>
  <div id="block5"></div>
</div>

这是样式:

 div {
  outline: solid 1px black;
}
#blocks {
  width:80%;
  height:500px;
  margin:0 auto;
  background-color: #ffe;
}

#block0 {
  height:10%;
  width:100%;
  background: red;
  float: left;
}

#block1 {
  height:10%;
  width:25%;
  background: orange;
  float: left;
}

#block2 {
  height:90%;
  width:50%;
  background: cyan;
  float:left;
}

#block3 {
  height:45%;
  width:25%;
  background: yellow;
  float: right;
}

#block4 {
  height:45%;
  width:25%;
  background: green;
  float: left;
}

#block5 {
  height:80%;
  width:25%;
  background: magenta;
  float: left;
}

我希望 block5 的顶部能够直接向上滑动到 block1 的底部，并对其行为进行解释。谢谢。

Here是这个的 fiddle

Answer 1

它会到底部，因为您将 block 5 之前的几个元素向左浮动。您可以删除 block 5 的 float :左侧，设置position:relative和顶部:20%(这将放置block 5 20% top relative to the blocks container)

    #block5 {
    height:80%;
    width:25%;
    background: magenta;
    position: relative;
    top: 20%;
    }