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>
<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>
--
