CSS自动竖向排列的布局方法
来源：互联网 发布：js格式化时间戳format 编辑：程序博客网 时间：2024/06/06 09:04
- 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="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
</div>
</body>
</html>
0 0
- CSS自动竖向排列的布局方法
- CSS Grid布局：理解CSS Grid中自动排列的算法
- 4种方法实现文字竖向排列
- 自定义布局---竖向的ViewPager
- 竖向排列文字
- 让CDC输出文字的时候让文字竖向排列
- css+div 图片排列布局
- css+div 图片排列布局
- CSS布局常用的方法
- CSS布局常用的方法
- CSS布局常用的方法
- css布局，居中的方法
- CSS几种简单方法实现文字竖向排版
- CSS几种简单方法实现文字竖向排版
- div+css布局漫谈 之 CSS布局常用的方法
- CSS 自动背景布局
- Android RadioGroup中横向、竖向布局RadioButton的问题
- Android RadioGroup中横向、竖向布局RadioButton的问题
- 淘宝开放平台的盈利模式
- 静态和非静态（C#）
- 孤儿进程和僵尸进程
- 嵌入式linux开发中一些有用的shell脚本收集整理
- 改主机名后Oracle OEM无法使用处理方法
- CSS自动竖向排列的布局方法
- 用java模拟银行业务调度系统
- android JIN使用流程
- Python 命令行参数和getopt模块详解
- Spring3.2+hibernate4整合报错 NoSuchMethodError:openSession()解决办法
- 一步步学习java并发编程模式之Active Object模式（三）java实现active object
- zoj 2966 Build The Electric System（并查集）
- RISC与CISC比较
- MVC 三层架构在各框架中的特征
