div、css怎么实现内容的分栏,先把左侧排满,高度不够时排到第二列,请教高人~~
可以通过竖向排列的方式,将子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
在每一个竖着的div里面填写你的内容
那不是固定死了,第一列就是a-g,第二列h-。。。我是想要第一列a-g高度不满某一个值的话,第二列的h什么的会到第一列,这个容易实现么
我个人觉得 就是要把每个div分开来考虑 这样简单点 而且效果应该不是太屎 你的每个div如果大小可变的话 可以先估计每个div的高度 大概能放多少组词汇 然后JS来分别把文本插入到div里面。。。不难实现的应该~
我是要先往下排,到一定高度后再网左排