可以通过竖向排列的方式，将子div设置为行内块即可。话不多说了，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {border: solid 1px #000}
#main-div {
width: 200px;
height: 300px;
writing-mode: vertical-lr;}
.item {
width: 100px;
height: 50px;
display: inline-block;
background-color: antiquewhite;
writing-mode: horizontal-tb;}
</style>
</head>
<body>
<div id="main-div">
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
</div>
</body>
</html>
效果如下：
这都已经9年了，也就我想到了这个问题的答案，我简直就是个天才，哈哈哈
如果内容是静态的，也就是固定的，那好办，左边一个div，右边一个div，如果内容是从后台输入，动态的，这根本用css实现不了，这样的设计用在平面上可以，用在网页里根本不行，让你们的设计改图吧
先div一个大的铺满，然后分别在里面分成几个竖着的div
在每一个竖着的div里面填写你的内容追问
那不是固定死了，第一列就是a-g，第二列h-。。。我是想要第一列a-g高度不满某一个值的话，第二列的h什么的会到第一列，这个容易实现么
追答我个人觉得 就是要把每个div分开来考虑 这样简单点 而且效果应该不是太屎 你的每个div如果大小可变的话 可以先估计每个div的高度 大概能放多少组词汇 然后JS来分别把文本插入到div里面。。。不难实现的应该~
本回答被提问者和网友采纳我是要先往下排，到一定高度后再网左排
虽然你是要先向下排列，可以看成是左右排列，其实就是高度宽度固定一个值左浮动，