在容器底部定位堆叠的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

回答

相关问题