html - div中的可变高度列表项目，底部对齐

Question

我们可以将这个现有的小提琴（解决方案）用于条形图并应用不同的高度值，

http://jsfiddle.net/RYBFF/1/

实际发生的是 bar 项目被锚定到 ul 容器的顶部，而当我们缩放项目时它应该被锚定到底部。

li.different {
    height: 80px !important;
}

例如，将不同的类应用于列表项之一将证明该问题。

Answer 1

• 将显示模式更改为inline-block
• 消除float: left;

并最终为列表中的第一项添加一些边距。

vertical-align仅适用于内联或内联块元素。您的列表项是块元素。

小提琴