php - 讓div區塊從最下面開始往上堆疊?
本文介绍了php - 讓div區塊從最下面開始往上堆疊?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
首先我有個div
<div id="外觀" style="overflow-x:hidden; overflow-y:auto; width:220px; height:700px; position:fixed; bottom:50px; left:50px;">
</div>
然後外觀 idv裡面的內容會是
(資料來源 php while循環 撈mysql)
<div id="內容" style="z-index:999; width:200px; display:inline-block;">
<div >
資料
</div>
</div>
外觀div 我是設定鎖定在螢幕左下角處
然後內容div 是用while循環 撈mysql
因為外觀div設定220px
因此內容div的200px因為有inline-block所以他會自己往下堆疊這沒問題
但問題來了
我想讓內容能夠在最下面
因為現在的情況是因為外觀div高是700px(我要讓他有卷軸所以設定高)
但是當有內容出現時
內容div會從最上面開始
要如何讓他從最下面開始然後往上堆疊?
我有試過在外觀div加上
vertical-align:text-bottom;或vertical-align:bottom;
但是都無效
解决方案
<style type="text/css">
.outer {
position: fixed;
bottom: 50px;
left: 50px;
width: 220px;
height: 200px;
background-color: #1abc9c;
overflow: hidden;
}
.inner {
position: absolute;
right: 0;
left: 0;
bottom: 0;
max-height: 200px;
overflow-y: auto;
}
</style>
<div class="outer">
<div class="inner">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
这篇关于php - 讓div區塊從最下面開始往上堆疊?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文