上下三角形在同一列

效果图如上：

解决思想：

定位啊，父级relative，一个三角形top：0，一个bottom：0

或者你两个三角形丢h4之类的标签，两个h4的高度一样。也可以。你用了div就定位吧。

代码如下

html结构：

<th>
   销售量
   <div className="TriangleContainer">
      <div className="triangle--upper"></div>
      <div className="triangle--down"></div>
   </div>
</th>

less 解决样式：

th {
        color: grey;
        width: 100px;

        .TriangleContainer {
            width: 20px;
            height: 12px;
            display: inline-block;
            position: relative;

            // display: flex;
            // flex-direction: column;
            .triangle--upper {
                position: absolute;
                top: 0;
                display: inline-block;
                width: 0;
                height: 0px;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                border-bottom: 5px solid grey;
            }

            .triangle--down {
                position: absolute;
                bottom: 0;
                display: inline-block;
                width: 0;
                height: 0px;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                border-top: 5px solid grey;
            }
        }
    }