CSS实现自动换列
由 Neters.CN 发表于 12:05 下午<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>
评论
太好了，沙发还是空的，要抢占？
发表评论