84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
CSS 使inline-block纵向排列,让li纵向排列，当不够空间的时候会换列。
正常情况下如果设置了ul 的宽度，li的高和宽，inline-block之后，li会横向排列，当空间不够会换行。
现在希望把横向换成纵向。
实现的目标：当设置了ul的高度之后li会按列像下排列。当空间不够的时候换列。用flex布局很容易实现，但是鉴于flex布局的兼容性，所以想问问各位大神 inline-block float这些或者其他的方法可以实现吗?
认证0级讲师
1 2 3 4 5 6 7 8 9 10
IE8及以上、现代浏览器支持.
什么都不需要，inline-block 本来就会自动换行啊
https://jsfiddle.net/f48jewqa/1/
兼容性比 flex 好点（兼容 IE9 及以上）稍难维护。但不用 Hack 就可以在 IE9-IE11 中保持一个样子。其实用 JavaScript 更好……
.itemContainer { width: 150px;overflow: auto; padding-left: 40px; -ms-transform: rotate(270deg) matrix(-1,0,0,1,0,0); transform: rotate(270deg) matrix(-1,0,0,1,0,0); font-size: 13px;color: white; list-style: none; font-family: "Roboto", Roboto; } .item { -ms-transform: rotate(270deg) matrix(-1,0,0,1,0,0); transform: rotate(270deg) matrix(-1,0,0,1,0,0); height: 20px;width: 30px;margin: 10px 0; background: #039be5; text-align: center;line-height: 20px; display: inline-block; }
1 2 3 4 5 6 7 8
css有个分列的column属性
.itemContainer { width:100px; column-count:2; } .item { height: 20px; width: 30px; margin: 10px 0; background: #039be5; text-align: center; line-height: 20px; display: inline-block; }
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
IE8及以上、现代浏览器支持.
什么都不需要，inline-block 本来就会自动换行啊
https://jsfiddle.net/f48jewqa/1/
兼容性比 flex 好点
（兼容 IE9 及以上）
稍难维护。
但不用 Hack 就可以在 IE9-IE11 中保持一个样子。
其实用 JavaScript 更好……
css有个分列的column属性