CSS竖向分列的机关代码，自动换行结果

发布时间：2018-08-18 22:09:41 所属栏目：活动来源：站长网

导读：CSS竖向分列的机关代码，自动换行结果，比如电脑桌面的图标一样，自动竖着分列，排满一列后从头举办下一列排序。要领有许多，有人用JS,有人用CSS，不管什么样的要领，简朴、兼容就是好代码，本代码仅供参考。示例： !DOCTYPE htmlhtmlheadstyle#mainBox{b

　　CSS竖向分列的机关代码，自动换行结果，比如电脑桌面的图标一样，自动竖着分列，排满一列后从头举办下一列排序。要领有许多，有人用JS,有人用CSS，不管什么样的要领，简朴、兼容就是好代码，本代码仅供参考。

　　示例：

<!DOCTYPE html> <html> <head> <style> #mainBox{ border:1px #f00 solid; width:300px; height:230px; writing-mode: tb-lr; -webkit-column-count:6; -moz-column-count:6; -webkit-column-gap:10px; -moz-column-gap:10px; } #mainBox a{ margin:5px; padding:0px; display:inline-block; width:30px; height:30px; border:1px #00f solid; writing-mode: lr-tb; } </style> </head> <body> <div id="mainBox"> <a href="#">烈</a> <a href="#">火</a> <a href="#">网</a> <a href="#">提</a> <a href="#">供</a> <a href="#">的</a> <a href="#">网</a> <a href="#">页</a> <a href="#">特</a> <a href="#">效</a> </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!