div、css怎么实现内容的分栏,先把左侧排满,高度不够时排到第二列,请教高人~~

 我来答
百度网友7c67338
2021-07-28
知道答主
回答量:21
采纳率:0%
帮助的人:1.3万
展开全部

可以通过竖向排列的方式,将子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年了,也就我想到了这个问题的答案,我简直就是个天才,哈哈哈

xiuyu_fan
2012-07-06 · 超过52用户采纳过TA的回答
知道小有建树答主
回答量:108
采纳率:0%
帮助的人:139万
展开全部

如果内容是静态的,也就是固定的,那好办,左边一个div,右边一个div,如果内容是从后台输入,动态的,这根本用css实现不了,这样的设计用在平面上可以,用在网页里根本不行,让你们的设计改图吧

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
madebyme
2012-07-06 · TA获得超过2897个赞
知道大有可为答主
回答量:2635
采纳率:0%
帮助的人:1397万
展开全部
最简单的可以这样来做
先div一个大的铺满,然后分别在里面分成几个竖着的div
在每一个竖着的div里面填写你的内容
追问
那不是固定死了,第一列就是a-g,第二列h-。。。我是想要第一列a-g高度不满某一个值的话,第二列的h什么的会到第一列,这个容易实现么
追答
我个人觉得 就是要把每个div分开来考虑 这样简单点 而且效果应该不是太屎 你的每个div如果大小可变的话 可以先估计每个div的高度 大概能放多少组词汇 然后JS来分别把文本插入到div里面。。。不难实现的应该~
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
andy111520
2012-07-06
知道答主
回答量:10
采纳率:0%
帮助的人:8.9万
展开全部
FLOAT:LEFT。。给层的CSS加个这个浮动!会自动往左边排!排不下了再往下排
追问
我是要先往下排,到一定高度后再网左排
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2012-07-06
展开全部
什么排版需要这样排?
追问

追答
虽然你是要先向下排列,可以看成是左右排列,其实就是高度宽度固定一个值左浮动,
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式