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: left ，设置位置:relative 和 top: 20% (这将放置 block 5 相对于 block 容器的 20% 顶部)

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