难题！这个网页布局css，js如何实现？欢迎赐教谢谢

2020-09-20 08:47

似水2020-09-20 08:47

如图：这个网页布局css，js如何实现？欢迎赐教谢谢

第1步. 把电脑屏幕均分成N列
第2步. 把100片篇短文以Div形式从上到下，从左到右地显示在上述这些列里
第3步. 难点：左边列最下面的一个Div(例如图中的Div3)如果文字内容太长则把显示不下的那部分文字跨列显示在右边那个列的顶部。
gzpl2020-09-20 08:52
试试flex看看能不能简单点实现？否则JS慢慢算怎么也能搞出来。
似水2020-09-20 08:53
回复2#gzpl

试过，就是第3步文本溢出则跨列继续显示做不到啊。。。
gzpl2020-09-20 08:56
这个要求就只能JS了，看能不能算每个div占的位置，放不下的新插入一个放其余的
andriod2020-09-20 10:03
打车问一下有没有简单的排版布局ccs生成方法
退休工人2020-09-20 10:53
横向瀑布流？
aaa8882020-09-20 11:11
小说的左右翻页？
whitegerry2020-09-20 11:55
应该是用 css column 分列，类似报纸那种排版小尾巴~
longwayhome2020-09-20 03:38
如果列宽是相等的,就计算字数吧,超过放到下一个
touchtruth2020-09-21 01:11
每列overflow:hidden;
计算一个列里3个div的高度是否超过列高，超过即有隐藏的内容。col.height - (div1.height+div2.height) = div3显示出来的高度。
把div3复制一份到列2，position:abs,top: - div3显示出来的高度。
linlance20002020-09-21 01:30
想想就累。。。
似水2020-09-21 02:23
---------------------
longwayhome2020-09-21 03:03
回复10#touchtruth
厉害 iOS fly ~