技巧源于对 writing-mode 的把控,全程不需要JS,先通过 vertical-lr
改成竖列的从左到右排序,再通过子项的 horizontal-tb
把数列内容纠正成横排的从上到下叠放(这是HTML的div叠放规则) ,代码如下
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <title>Title</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- div {
- border: 1px solid #000;
- }
- .main {
- width: 200px;
- height: 300px;
- /* 主要代码,控制列排放 */
- writing-mode: vertical-lr;
- border: solid 1px #000;
- display: flex;
- flex-wrap: wrap;
- }
- .item {
- /* 主要代码,控制多少列,比如50%是2列,25%就是4列 */
- width: 50%;
- height: 50px;
- background-color: #aaa;
- /* 主要代码,控制项方向 */
- writing-mode: horizontal-tb;
- }
- </style>
- </head>
- <body>
- <div class="main">
- <div class="item">内容1</div>
- <div class="item">内容2</div>
- <div class="item">内容3</div>
- <div class="item">内容4</div>
- <div class="item">内容5</div>
- <div class="item">内容6</div>
- <div class="item">内容7</div>
- <div class="item">内容8</div>
- <div class="item">内容9</div>
- </div>
- </body>
- </html>