从下到上堆叠Div
从下到上堆叠Div
提问于 2011-06-19 18:35:29
当将divs附加到具有固定高度的div时，子div将从上到下显示，并停留在顶部边框。
┌─────────────────────────┐
│ Child Div 1 │
│ Child Div 2 │
│ │
│ │
│ │
└─────────────────────────┘我现在尝试从下到上显示它们，如下所示(粘贴到底部边框)：
┌─────────────────────────┐
│ │
│ │
│ │
│ Child Div 1 │
│ Child Div 2 │
└─────────────────────────┘
┌─────────────────────────┐
│ │
│ │
│ Child Div 1 │
│ Child Div 2 │
│ Child Div 3 │
└─────────────────────────┘
┌───────────────────────┬─┐
│ Child Div 2 │▲│
│ Child Div 3 │ │
│ Child Div 4 │ │
│ Child Div 5 │█│
│ Child Div 6 │▼│
└───────────────────────┴─┘以此类推。我希望你明白我的意思。
使用CSS (类似vertical-align: bottom)可以简单地做到这一点吗？或者我必须和JavaScript一起破解一些东西？
回答 4
Stack Overflow用户
发布于 2020-05-26 16:31:54
我们可以简单地使用CSS转换来将其存档。
我为它创建了一个codepen。https://codepen.io/king-dev/pen/PoPgXEg
.root {
transform: scaleY(-1);
}
.root > div {
transform: scaleY(-1);
}这个想法是首先水平翻转根，然后再次翻转直接子div。
注意:上面的方法也颠倒了div的顺序。如果您只是想从底部开始放置它们，您可以执行以下操作。
.root {
display: flex;
flex-direction: column;
height: 100px;
overflow-y: auto;
}
.root > div:first-child {
margin-top: auto;
}Stack Overflow用户
发布于 2020-06-05 19:49:08
我希望这项工作与bootstarp喜欢聊天应用程序中的消息流自下而上
在读了一些东西之后，我发现了这个
我有一个外部div，假设类是.outerDiv，然后是UI，list
.outerDiv {
height: 361px;
position: relative;
}
ui.msg-content{
width: 100%;
bottom: 0;
position: absolute;
max-height: 98%;
overflow-y: auto;
}
Stack Overflow用户
发布于 2011-06-19 18:41:46
当您使用position: absolute时，这很简单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6401869
复制相关文章
相似问题