html - 在较大的 div 中垂直移动 div

Question

我正在制作一个动画，其中包含一个较大的 div 中的一组四个 div。四个 div 太大，无法一次全部放入一个 div，因此我希望能够指定较大的 div 应该开始的位置。例如，这里我在 div 中有四个框。从上到下，盒子分别是绿色、紫色、粉色、蓝色(当前jsfiddle中看不到蓝色，因为被截掉了)。我希望较大的全显示 div 的底部与蓝色框的中间对齐，其他所有内容都适合帽子上方，直到它在 div 的顶部被切断。最终我将实现一个定制的滚动按钮(因为我不希望它看起来像溢出:滚动按钮)但现在我只是想让 CSS 以我想要的方式显示内部 div。

JS fiddle :http://jsfiddle.net/o33gw35w/

CSS:

body {padding: 0; margin: 0; height: 100%; overflow: hidden; font-family: Helvetica;}

.nameblock {
height:10%;
width: 30%;
position: absolute;
background-color: yellow;
}

.fulldisplay {
height:90%;
width: 30%;
position: absolute;
overflow: hidden ;
}


.spacer1 {
height:40%;
position: relative;
background-color: green;
}


.spacer2{
height:40%;
position: relative;
background-color: purple;
}


.spacer3 {
height:40%;
position: relative;
background-color: pink;
}


.spacer4{
height:40%;
position: relative;
background-color: blue;
}

HTML:

    <div class="nameblock"></div><br/>

<div class="fulldisplay">
    <div class="spacer1">
    </div>
    <div class="spacer2">
    </div>
    <div class="spacer3"></div>
    <div class="spacer4"></div>
</div>

</body>

Answer 1

如果我把问题弄错了，我深表歉意，因为我不太确定你想做什么，但如果你想有一种动态排序的方法，你可以使用 css flexbox 来做到这一点。您可能需要调整类以具有正确的宽度和高度(例如 width: 100%; height: 150px;)并定义 flex 容器，类似于下面的代码片段。

.fullconversation {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 30%;
  display: flex;
  flex-direction: row;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

然后

.spacer4{
width: 100%;
height: 150px;
position: relative;
background-color: blue;
order: -1;
}

有关 flexbox 的更多信息，请参阅以下网址或随时提出有关 flexbox 或 css 的任何问题。希望这会有所帮助。

https://css-tricks.com/almanac/properties/o/order/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

************已更新************

如果将 spacer1 的高度更改为 10%，那么您将在底部看到可见的蓝色框。注意10%这个值只是一个例子，只要inner s的heights的总大小不超过100%，就会看到蓝色框。

.spacer1 {
height:10%;
position: relative;
background-color: green;
}

另外，如果你想看到所有的 div 而不管大小，你可以将 overflow 设置为 other than hidden。