Html 从下到上堆叠 Div
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6401869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stacking Divs from Bottom to Top
提问by Wulf
When appending div
s to a div
with a fixed height, the child divs will appear from top to bottom, sticking at the top border.
将div
s附加到div
具有固定高度的 a 时,子 div 将从上到下出现,并停留在顶部边框处。
┌─────────────────────────┐
│ Child Div 1 │
│ Child Div 2 │
│ │
│ │
│ │
└─────────────────────────┘
I'm now trying to display them from bottom to top like this (sticking to the bottom border):
我现在试图像这样从下到上显示它们(坚持底部边框):
┌─────────────────────────┐
│ │
│ │
│ │
│ 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 │▼│
└───────────────────────┴─┘
And so on... I hope you get what I mean.
等等......我希望你明白我的意思。
Is this simply doable with CSS (something like vertical-align: bottom
)? Or do I have to hack something together with JavaScript?
这是否可以通过 CSS(类似于vertical-align: bottom
)简单可行?或者我必须用 JavaScript 来破解一些东西吗?
采纳答案by gblazex
All the answers miss the scrollbarpoint of your question. And it's a tough one. If you only need this to work for modern browsers and IE 8+ you can use table positioning, vertical-align:bottom
and max-height
. See MDNfor specific browser compatibility.
所有答案都错过了问题的滚动条点。这是一个艰难的过程。如果您只需要它在现代浏览器和 IE 8+ 上工作,您可以使用表格定位,vertical-align:bottom
并且max-height
. 有关特定浏览器兼容性,请参阅MDN。
Demo(vertical-align)
演示(垂直对齐)
.wrapper {
display: table-cell;
vertical-align: bottom;
height: 200px;
}
.content {
max-height: 200px;
overflow: auto;
}
html
html
<div class="wrapper">
<div class="content">
<div>row 1</div>
<div>row 2</div>
<div>row 3</div>
</div>
</div>
Other than that, I think it's not possible with CSS only. You can make elements stick to the bottom of their container with position:absolute
, but it'll take them out of the flow. As a result they won't stretch and make the container to be scrollable.
除此之外,我认为仅使用 CSS 是不可能的。您可以使用 使元素粘在容器的底部position:absolute
,但这会使它们脱离流。因此,它们不会拉伸并使容器可滚动。
Demo(position-absolute)
演示(绝对位置)
.wrapper {
position: relative;
height: 200px;
}
.content {
position: absolute;
bottom: 0;
width: 100%;
}
回答by Nils Kaspersson
A more modern answer to this would be to use flexbox
.
对此更现代的答案是使用flexbox
.
As with many other modern features, they won't work in legacy browsers, so unless you're ready to ditch support for browsers from the IE8-9 era you will need to look for another method.
与许多其他现代功能一样,它们在旧版浏览器中不起作用,因此除非您准备放弃对 IE8-9 时代的浏览器的支持,否则您将需要寻找另一种方法。
Here's how it's done:
这是它的完成方式:
.parent {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.child {
/* whatever */
}
And that's all you need. For further reading on flexbox
, see MDN.
这就是你所需要的。如需进一步阅读flexbox
,请参阅MDN。
Here's an example of this with some basic styling: http://codepen.io/Mest/pen/Gnbfk
这是一个带有一些基本样式的示例:http: //codepen.io/Mest/pen/Gnbfk
回答by Mckay M
We can simply use CSS transform to archive this.
我们可以简单地使用 CSS 转换来存档。
I created a codepen for it. https://codepen.io/king-dev/pen/PoPgXEg
我为它创建了一个代码笔。 https://codepen.io/king-dev/pen/PoPgXEg
.root {
transform: scaleY(-1);
}
.root > div {
transform: scaleY(-1);
}
The idea is to flip the root first horizontally and then flip direct children divs again.
这个想法是先水平翻转根,然后再次翻转直接子 div。
回答by veganaiZe
Keepin' it oldskool...
保持它oldskool...
I wanted to do the same thing in a #header
divso I created an empty divcalled #headspace
and placed it on the top the stack (inside of #header
):
我想做同样的事情在一个#header
DIV,所以我创建了一个空的div叫#headspace
,把它放在顶部的堆栈(内#header
):
<div id="header">
<div id="headspace"></div>
<div id="one">some content</div>
<div id="two">other content</div>
<div id="three">more content</div>
</div> <!-- header -->
Then I used a percentage, for the height of the invisible #headspace
div, to push the others down. It's easy to use the developer / inspector tools of the browser to get this just right.
然后我使用了一个百分比,作为不可见#headspace
div的高度,将其他人推下。使用浏览器的开发人员/检查员工具很容易做到这一点。
#header {
width: 100%;
height: 10rem;
overflow: auto;
}
#headspace {
width: 100%;
height: 42%; /* Experiment with Inspect (Element) tool */
}
#one, #two, #three {
/* Insert appropriate dimensions for others... */
}
回答by Chris
This is simple when you use position: absolute
.
当您使用position: absolute
.
回答by Matt Healy
<div style="height: 500px;">
<div style="height: 20px; position: absolute; bottom: 120px;">Child Div 1</div>
<div style="height: 20px; position: absolute; bottom: 100px;">Child Div 2</div>
<div style="height: 20px; position: absolute; bottom: 80px;">Child Div 3</div>
<div style="height: 20px; position: absolute; bottom: 60px;">Child Div 4</div>
<div style="height: 20px; position: absolute; bottom: 40px;">Child Div 5</div>
</div>