实现元素纵向排列主要靠 css 的 writing-mode 属性和 float 属性。
设置 writing-mode 值为 vertical-lr , 可以使所有子元素纵向排列。
此时发现里面的子元素仍旧是横向排列，但文字变纵向了
再加上 float: left 让元素左排。
此时，元素已经变成纵向排列了，但由于未限制高度，元素将无限向下排列。同时子元素的文字排列方式也变成了纵向。
在给列表加一个高度。并重新设置子元素 writing-mode 属性便可解决
此时效果已经完成，但还有一个奇怪的问题
在添加到某个位置元素直接会跳到这列最后一个，不知这个问题为何会产生，但是在给子元素添加一个宽度后，bug 便神奇的好了。。
总结: writing-mode 是一个很长久的 css 属性了，新的值 vertical-lr 在大部分现代浏览器都已支持，在古老的 ie9 以下，也可用 lr 代替,所以这种实现方式是可兼容的。只是注意某些浏览器需要 --webkit- 或 --ms- 前缀。
writing-mode 属性 --MDN
有效的过渡属性包括：background, position, border, color,margin, padding, height, width, outline, visibility, opacity, zindex,line-height, letter-spacing, word-spacing, min/maxlength/height/width, text的一些属性等等
transition-duration:time[,time]*：指定对象过渡的持续时间
transition-timing-function是transition属性里最为复杂的一个，针对的是过渡效果的特效。
五种预留特效：
linear:线性过渡。等同于贝塞尔曲线(0,0,1.0,1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)
ease-in-out:又慢到快再到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)
transition-timing-function是transition属性里最为复杂的一个，针对的是过度效果的特效。
也可以自己制定过渡特效：cubic-bezier(number,number,number,number)。特定的贝塞尔曲线类型，4个数值需在[0,1]区间内。（贝塞尔曲线，有人也翻译为贝兹曲线）
