CSS竖向排列的布局代码，自动换行效果

发布时间：2018-08-17 00:49:21 所属栏目：活动来源：站长网

导读：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>
提示：可修改后代码再运行!

（编辑：核心网）

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