本文介绍了一种使用CSS实现自动竖向排列布局的方法，通过设置writing-mode属性和利用column-count等属性，可以实现在不同浏览器上的良好兼容性。
- 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>
扫一扫
4257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
