CSS实现自动换列

项目里需要自动换列的效果，搜索后无果，于是冥思苦想，反复尝试，终于实现了这个自动换列的效果。

因为用了IE滤镜，所以只适用于IE，这已经是没有办法中的办法。在互联网上基本是用不上了，但在特定的条件下（比如企业内部的Web系统），还是很有用的。

最终效果：

 

思路就是——转来转去，转来转去。

下面是代码:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
< title > 纯CSS自动换列（只适合IE） </ title >
< style  type ="text/css" >
*
{
    margin : 0 ;
    padding : 0 ;
}

body
{
    font-size : 12px ;
    font-family : "宋体" ;
}

#container
{
    margin : 4px ;
    padding : 4px ;
    width : 330px ;
    height : 180px ;
    border : solid 1px red ;
    
     /* 关键 */
    writing-mode : tb-rl ;
    filter : FlipV() ;
}
#container li
{
    margin : 2px ;
    vertical-align : top ;
    
     /* 关键 */
    display : inline ;
    writing-mode : lr-tb ;
    filter : FlipH() ;
}
</ style >
</ head >
< body >
< div  id ="container" >
< ul >
     < li > 第01名 上海 </ li >
     < li > 第02名 北京 </ li >
     < li > 第03名 重庆 </ li >
     < li > 第04名 无锡 </ li >
     < li > 第05名 哈尔滨 </ li >
     < li > 第06名 锦州 </ li >
     < li > 第07名 呼和浩特 </ li >
     < li > 第08名 连云港 </ li >
     < li > 第09名 太原 </ li >
     < li > 第10名 合肥 </ li >
     < li > 第11名 海口 </ li >
     < li > 第12名 高雄 </ li >
     < li > 第13名 攀枝花 </ li >
     < li > 第14名 杭州 </ li >
     < li > 第15名 武汉 </ li >
     < li > 第16名 济宁 </ li >
     < li > 第17名 通辽 </ li >
     < li > 第18名 红烧排骨 </ li >
     < li > 第19名 冰露 </ li >
     < li > 第20名 金银花 </ li >
     < li > 第21名 衣柜 </ li >
     < li > 第22名 隔行扫描 </ li >
     < li > 第23名 投影 </ li >
     < li > 第24名 测距 </ li >
     < li > 第25名 拿破仑定理 </ li >
     < li > 第26名 非欧几何 </ li >
     < li > 第27名 天地武魂 </ li >
     < li ></ li >
     < li ></ li >
     < li > *此列表纯属虚构 </ li >
</ ul >
</ div >
</ body >
</ html >

 

 --

转载于:https://www.cnblogs.com/hopecn/archive/2008/12/03/1347108.html