一、需求
- div、css怎么实现内容的分栏，先把左侧排满，高度不够时排到第二列
- 要求内容竖向排列，先第一列，第一列满了排第二列，以此类推
二、方案
- 可以通过竖向排列的方式，将子div设置为行内块即可，具体实现：
- 外层div设置 writing-mode: vertical-lr
- 外层超出宽度需要滚动的话加上 overflow: auto
- 内容div设置 display: inline-block
- 内容如果需要控制文字正常横排 需要设置 writing-mode: horizontal-tb
三、直接看代码，一目了然、里面有注释，拷贝出来可以直接运行看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>如何实现div分列显示，第一列竖向排满，自动换到下一列继续排</title>
<style>
#main {
width: 300px;
height: 300px;
border: solid 1px #aa00ff;
padding: 1px;
/* div里的内容竖向排列 */
writing-mode: vertical-lr;
/* 如果内容超出div了，想在此div中滚动的话需要加上overflow: auto; */
overflow: auto;
}
.item {
width: 100px;
height: 50px;
display: inline-block;
background-color: #129FEA;
margin: 1px;
/* 文字横排 */
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<div id="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 class="item">第10条内容</div>
<div class="item">第11条内容</div>
<div class="item">第12条内容</div>
<div class="item">第13条内容</div>
<div class="item">第14条内容</div>
<div class="item">第15条内容</div>
<div class="item">第16条内容</div>
</div>
</body>
</html>