84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
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; }
IE8及以上、现代浏览器支持.
什么都不需要,inline-block 本来就会自动换行啊
https://jsfiddle.net/f48jewqa/1/
兼容性比 flex 好点
(兼容 IE9 及以上)
稍难维护。
但不用 Hack 就可以在 IE9-IE11 中保持一个样子。
其实用 JavaScript 更好……
css有个分列的column属性