【问题标题】:How to make stacked divs grow vertically upwards?如何让堆叠的 div 垂直向上增长?
【发布时间】:2019-12-10 04:53:24
【问题描述】:

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

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

我想让它看起来像一个堆叠的条形图

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

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

【问题讨论】:

    标签: css angularjs sass flexbox


    【解决方案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/

    【讨论】:

      猜你喜欢
      • 2013-10-10
      • 1970-01-01
      • 2019-07-13
      • 1970-01-01
      • 2020-11-29
      • 1970-01-01
      • 2020-11-21
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多