css - 如何让堆叠的 div 垂直向上增长？

Question

我正在创建一个堆积条形图。最终，酒吧将是动态的，所以我需要酒吧垂直增长。当我增加任何条的高度时，条（div）会向下增长。我希望他们向上成长。

我尝试通过使用来增加高度，padding-top但这似乎也不起作用。

我希望它像一个堆叠的条形图

https://jsfiddle.net/ruju/18qar5sb/1/

在这里，如果我尝试增加高度.uc-bar-accept，.uc-bar-deny然后条形图将在下方而不是上方垂直增加。

标签： cssangularjssassflexbox

Answer 1

将条形图的定位条瞄准网格线 0,100,200,300 等

问题 - 当条形元素变高时，它们会在屏幕上向下生长，不再与条形图对齐。

可能的解决方案 - 对条形图的条使用绝对位置，使用底部命令从父级底部定位。

使 div .uc-bar-wrapper-parent 成为 div .uc-bar-graph 的子级。这确保了底部命令与父级的位置相关。

垂直排列 .uc-bar-wrapper-parent 使其正确地位于网格线上，例如底部：80px 现在条形图元素的任何增长都将在页面上，并且图表将与网格线保持对齐。

jsfiddle [https://jsfiddle.net/newschapmj1/jgdhm5ua/2/][1]

我不是定位专家，所以我可能错过了更好的方法。我看了这里https://css-tricks.com/almanac/properties/p/position/