Question

我制作的动画涉及一个较大div内的一组四个div。四个div太大而不能同时适合一个div，所以我希望能够指定较大div应该开始的位置。例如，这里我在div里面有四个盒子。从上到下，盒子是绿色，紫色，粉红色和蓝色（你不能在当前的jsfiddle中看到蓝色，因为它被切断了）。我希望较大的fulldisplay div的BOTTOM与蓝盒子的MIDDLE对齐，以及其他一切都适合帽子，直到它在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这样做。您可能需要调整类以具有正确的宽度和高度（例如，宽度：100％; 高度：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％只是一个示例，只要内部高度的总大小不超过100％，蓝色框将是可见的。

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

此外，如果您想查看所有div，无论大小如何，您只需将溢出设置为隐藏以外的其他。

在较大的div内垂直移动div

1 个答案: