需求：一个容器里面有若干直接子元素，竖向排列，假设固定容器高度只能够装下5个。
第6个元素会换到另一列继续竖向排序。
请教各位如何用CSS显示这个布局。注意：1、所有元素必须有一个共同的父级容器，不能分成两列。2、要兼容IE9，flex用不了。
1 回答
侃侃尔雅
TA贡献1801条经验 获得超16个赞
writing-mode 了解一下
<!DOCTYPE html>
<html>
<head>
<style>
#mainBox {
border: 1px #f00 solid;
width: 300px;
height: 250px;
writing-mode: tb-lr;/*IE写法*/
writing-mode: vertical-lr;
}
#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>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>
</body>
</html>- 1 回答
- 0 关注
- 757 浏览
添加回答
举报
0/150
提交
取消