html中竖向排列,css实现元素竖向排列 --- writing-mode

在许多使用场景下，会有让列表内元素竖着排列，高度不够，纵向换行的需求。本文教你如何实现一个竖着的元素排列。

最终效果

实现效果

实现效果动图

实现方法

实现元素纵向排列主要靠 css 的 writing-mode 属性和 float 属性。

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

设置 writing-mode 值为 vertical-lr, 可以使所有子元素纵向排列。

添加 writing-mode: vertical-lr; 后

此时发现里面的子元素仍旧是横向排列，但文字变纵向了

再加上 float: left; 让元素左排。

再加 float: left; 后

此时，元素已经变成纵向排列了，但由于未限制高度，元素将无限向下排列。同时子元素的文字排列方式也变成了纵向。

在给列表加一个高度。并重新设置子元素 writing-mode 属性便可解决

完成效果

此时效果已经完成，但还有一个奇怪的问题

奇怪的效果

在添加到某个位置元素直接会跳到这列最后一个，不知这个问题为何会产生，但是在给子元素添加一个宽度后，bug 便神奇的好了。。

兼容性

Chrome

Edge

Firefox

IE

Opera

Safari

Basic support

48✔️

12✔️

41 ✔️

9✔️

15✔️

5.1✔️

lr, lr-tb, rl, rl-tb, tb, and tb-rl

48✔️

12✔️

43 ✔️

9✔️

✔️

❓

horizontal-tb, vertical-lr, and vertical-rl

✔️

❌

43 ✔️

❌

✔️

❓

sideways-lr and sideways-rl

❌

❓

43 ✔️

❌

❌

❓

总结: writing-mode 是一个很长久的 css 属性了，新的值 vertical-lr 在大部分现代浏览器都已支持，在古老的 ie9 以下，也可用 lr 代替,所以这种实现方式是可兼容的。只是注意某些浏览器需要 --webkit- 或 --ms- 前缀。

完成代码(Angular 示例)

• {{item}}

• 添加选项

// ts

export class Example {

list: string[] = ['所有'];

constructor() { }

handleAdd() {

this.list.push(`第${this.list.length}项`);

}

}

// less

// 纵向排列样式

.column-list {

height: 220px;

width: 100%;

overflow: scroll;

writing-mode: vertical-lr;

&-item {

float: left;

width: 80px;

writing-mode: horizontal-tb;

}

}

// ul 样式

ul.ul-style {

list-style: none;

margin: 20px;

padding: 0;

li {

padding: 0 20px;

margin: 0 20px 20px 0;

color: #383838;

}

& .add {

color: #3b90f1;

cursor: pointer;

}

}

参考文档