css - 如何让堆叠的div垂直向上生长?

标签 css angularjs sass flexbox

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

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

我希望它表现得像一个堆积条形图

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

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

最佳答案

将条形图的条定位在网格线 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/

关于css - 如何让堆叠的div垂直向上生长?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57311607/

相关文章:

html - 如何调整列表样式图像的大小?

javascript - 将 $scope.variable 从一个 View 传递到另一个 View

html - 网站的主体和元素固定在 980px 宽度上,不会缩小

html - 删除 vuetify 数据表标题上的下拉箭头?

html - Bootstrap 表单组元素间距

jquery - 侧边栏全高,位于页脚顶部

html - 如何在最后可能的空白处换行 HTML 列表

unit-testing - 如何在AngularJS中测试$ scope。$ on

jquery - 将 Jquery Image Zoom Plugin 与 Angular js 集成的正确方法是什么?

javascript - gulp.js 剥离输出文件的相对路径