如何使堆叠的div垂直向上生长?

时间:2019-08-01 14:45:20

标签: css angularjs sass flexbox

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

我尝试使用padding-top向上增加高度,但这似乎也不起作用。

我希望它的行为像堆积的条形图

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

在这里,如果我尝试增加.uc-bar-accept.uc-bar-deny的高度,则该条将在垂直下方而不是上方垂直增加。

1 个答案:

答案 0 :(得分:0)

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

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

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

使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/