gpt4 book ai didi

html - 从底部到顶部堆叠 Div

转载 作者:技术小花猫 更新时间:2023-10-29 11:26:34 26 4
gpt4 key购买 nike

当将 div 附加到具有固定高度的 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 一起破解某些东西?

最佳答案

所有答案都错过了您问题的滚动条点。这是一个艰难的过程。如果您只需要它适用于现代浏览器和 IE 8+,您可以使用表格定位、vertical-align:bottommax-height。参见 MDN用于特定的浏览器兼容性。

Demo (垂直对齐)

.wrapper {
display: table-cell;
vertical-align: bottom;
height: 200px;
}
.content {
max-height: 200px;
overflow: auto;
}

html

<div class="wrapper">
<div class="content">
<div>row 1</div>
<div>row 2</div>
<div>row 3</div>
</div>
</div>

除此之外,我认为仅使用 CSS 是不可能的。您可以使用 position:absolute 使元素粘在其容器的底部,但这会使它们脱离流程。因此,它们不会拉伸(stretch)并使容器可滚动。

Demo (绝对位置)

.wrapper {
position: relative;
height: 200px;
}
.content {
position: absolute;
bottom: 0;
width: 100%;
}

关于html - 从底部到顶部堆叠 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6401869/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com