实现元素纵向排列主要靠 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
纵向的，可以用 ul li 来做，只要控制ul 和li 的宽度即可。
我贴个代码给你。
html 的
----------
<div class="new_box">
<ul> <li>2010/11/09 <a href="news/news.php?id=42">222</a></li>
<li>2010/11/08 <a href="news/news.php?id=41">444</a></li> <li>2010/10/14 <a href="news/news.php?id=40">44445</a></li>
</ul>
<div class="clear"></div>
</div>
-----------------------------
CSS
-------
.new_box{
width:235px
background:url(../img/news_bk.jpg) repeat-y
}
.new_box ul{
list-style:none
}
.new_box ul li{
padding-top:6px
list-style:none
width:205px
line-height:18px
padding-left:20px
float:left
background:url(../img/new_dot.jpg) 10px 14px no-repeat
｝
---------------
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：body
{
background-image:url('/i/eg_bg_03.gif')
background-repeat:no-repeat
background-position:50% 50%
}
这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50%
50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角
