在容器底部定位堆疊的div div

我正在PHP中構建一個放樣的條形圖。我需要它看起來像這樣：在容器底部定位堆疊的div div

enter image description here

目前我能夠堆疊起來的灰色和紅色值，但他們在.graph容器的頂部。我如何在底部對齊它們？我嘗試了垂直對齊：底部，但它並沒有真正的工作。

<div class="graph"> 
    <div class="bar"> 
     <div class="views" style="height:'.$showViews.'px"></div> 
     <div class="actions" style="height:'.$showActions.'px"></div> 

    </div> 
</div>

和CSS

.graph { 


    width: 200px; 
    height: 32px; 
    border-top: 1px solid #f5f5f5; 
    border-bottom: 1px solid #ccc; 
    background-color: #f5f5f5; 
} 
.graph .bar { 
    width: 10px; 
    float: left; 
    margin: 0 1px; 
    height:30 
} 
.graph .bar .views { 
    background-color: #ccc 
} 
.graph .bar .actions { 
    background-color: red 
}

Here's my code on JSFIDDLE。

謝謝。

來源

2014-03-05 santa

HTML是不是真的意味着準確的介紹，也許是一個基於SVG的解決方案會更容易？ – nishantjr

.graph .bar {position：absolute; bottom：0;} ;. graph {position：relative; }？ – nishantjr

position:absolute會讓你的生活更輕鬆！

這裏有一個小提琴：

http://jsfiddle.net/RZ8ye/1/

基本上，我們使用position:absolute堆疊在彼此頂部的元素。通過給出父母定位（在我們的例子中，「relative」），我們定位堆疊的元素相對於那個。我們設置bottom，left，並right然後定義height與內嵌樣式（基於百分比，基於父）

來源

2014-03-05 06:31:36 Jack

剛剛在CSS中添加了position:relative值。

這裏是修改後的代碼。

.graph .bar .views 
{ 
background-color: #ccc; 
height:10px; /*height can be added dynamically*/ 
position:relative; 
} 
.graph .bar .actions 
{ 
background-color: red; 
position:relative; 
height:20px; 
}

HTML看起來像張貼一樣。

<div class="graph"> 
    <div class="bar"> 
      <div class="views" style="height:'.$showViews.'px"></div> 
      <div class="actions" style="height:'.$showActions.'px"></div> 
     </div> 
    <div class="bar"> 
      <div class="views" style="height:'.$showViews.'px"></div> 
      <div class="actions" style="height:'.$showActions.'px"></div> 
     </div> 
</div>

這是演示。 http://jsfiddle.net/HHnRQ/1/

來源

2014-03-05 06:25:57

在容器底部定位堆疊的div div

回答

相關問題