jquery構建它們後的CSS Stack divs

Question

簡要背景：如果有信息需要構建，我正在使用Jquery構建Divs。

今天我已經閱讀了幾個關於堆疊Divs的主題，但是我嘗試的所有東西似乎都不起作用。

鑑於以下Example fiddle（這就是我目前的解決方案看起來像）

我想堆疊BAR 2到BAR 1，然後杆3到BAR 2，創建一個像這樣的最終結果是：

BAR 3 

BAR 2 

BAR 1 

我知道這個問題已經被問了很多以前，但沒有任何線程幫助我，所以我想我會顯示我的代碼。

謝謝！

Answer 1

刪除position:absolute從.bar並添加一些高度。

你的小提琴updateded：http://jsfiddle.net/4GjrX/1/

Answer 2

HTML

<div class="bars"> 
    <div class="bar-group"> 
     <div class="bar fig2">BAR3</div> 
     <div class="bar fig1">BAR2</div> 
     <div class="bar fig0">BAR1</div>  
    </div> 
</div> 

CSS

/* Graph Bars */ 
.bars { 
    height: 253px; 
    width: 100%; 
} 
.bar-group { 
    height: 100%; 
    margin: 0 30px; 
    width: 200px; 
} 
.bar { 
    border-radius: 3px 3px 0 0; 
    cursor: pointer;  
    height: 0; 
    text-align: center; 
    display:inline-block;  
    width: 150px; 
} 

Answer 3

/* Graph Bars */ 
.bars { 

    position: relative; 
    width: 100%; 
    z-index: 10; 
} 
.bar-group { 
    float: left; 
    height: 100%; 
    margin: 0 30px; 
    position: relative; 
    width: 200px; 
    /* Internet Explorer 10 */ 
    display:-ms-flexbox; 
    -ms-flex-direction:reverse; 

    /* Firefox */ 
    display:-moz-box; 
    -moz-box-direction:reverse; 

    /* Safari, Opera, and Chrome */ 

    -webkit-box-direction:reverse; 

    /* W3C */ 
    display:box; 
    box-direction:reverse; 
    } 
} 
.bar { 
    border-radius: 3px 3px 0 0; 
    bottom: 0; 
    cursor: pointer;  
    height: 0; 
    position: absolute; 
    text-align: center; 
    width: 150px; 
} 
.bar.fig0 { 
    left: 0; 
} 
.bar.fig1 { 
    left: 52px; 
} 
.bar.fig2 { 
    left: 104px; 
}