当将div
s附加到具有固定高度的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一起破解一些东西?
发布于 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;
}
发布于 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;
}
发布于 2011-06-19 18:41:46
当您使用position: absolute
时,这很简单。
https://stackoverflow.com/questions/6401869
复制相似问题