html – 堆叠从底部到顶部

当将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:bottom和max-height。有关特定浏览器兼容性,请参阅MDN

Demo(vertical-align)

.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,但它会把它们从流中移出。因此,它们不会伸展并使容器可滚动。

Demo(position-absolute)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}
http://stackoverflow.com/questions/6401869/stacking-divs-from-bottom-to-top

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – 堆叠从底部到顶部