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是这个

的小提琴

Answer 1

它会向下移动，因为你向左移动了几个元素，这些元素位于块5之前。你可以移除浮动：向左移动到块5，设置一个位置：relative和top：20％（这将放置块5相对于块容器20％顶部）

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

Answer 2

换句话说，block5正在进行，因为你已经用完了以前的所有可用宽度空间。你可以把它与你的工作联系起来：如果你将花盆放在阳台的边缘并且没有足够的空间，那么最后一个锅就落在某个人的头上。

为避免这种情况，您可以使用其他div制作货架。这是对您的代码的快速尝试。只需一点奉献精神，你就可以做得更好。

div {outline: solid 1px black}
#blocks {
width:80%;
margin:0 auto;
background-color: #ffe;
}
#shelve1,#shelve2,#shelve3{display:inline-block}
#shelve1 {width:21%}
#shelve2 {width:56%}
#shelve3 {width:21%}
#block0 {
height:50px;
background: red;
display:block
}
#block1 {height:50px;background: orange}
#block2 {height:450px;background: cyan}
#block3 {height:225px;background: yellow}
#block4 {height:225px;background: green}
#block5 {height:400px;background: magenta}

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

如今，把你的花盆放在一个漂浮的托盘上也不是一个好主意，随着一阵风，它们都会掉下来。 CSS Tricks解释了为什么并建议使用显示属性。

在集装箱内安排分部

2 个答案: