自动换列

CSS实现自动换列

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