在每个列基于CSS的列上加载四行之后，数据自动填充到下一列。
只使用CSS实现；每列四行，加载一列后，数据自动填充到下一列的效果：如果我们把话题改为，我们只使用CSS来实现每行四行，在加载一行之后，数据将自动填充到下一行中。那就简单多了。我相信你可以用多种方法来实现它，但现在如何解决这个问题呢。
这似乎不是解决这个问题的好办法。毕竟，我们都在使用JS或模板帮助。
这个问题的难点在哪里
动态添加数据只使用CSS来实现这种效果，这意味着除了动态添加数据之外，不可能改变现有的文档结构。例如，对于这个实现，我们可以使用UL - LI结构，但是除了增加李（相当于添加数据层）之外，不可能在原始文件中添加UL或其他HTML标记。
这个问题也变成了李如何将它们设置在同一个UL上的另一个属性，使它在第五之后浮动到另一列（注：这是作者使用的结构，可以使用其他结构。）
对这里的问题的分析，我的第一个反应是使用这个属性到n个子，即：第n个子（5），即：第n个子（6），第n个子（7）…分别具有定位属性，如增加第五、第六、第七的数据可以显示在相应的位置上，但这不适合编写动态添加的数据。毕竟，我们不知道有多少数据，我们还需要计算左和李在定位上的电流值。（每个人都是这个想法扩大SCSS等感兴趣）
uff1a解
Here, I'd like to introduce another implementation method, which uses CSS3's column to dispose the related attributes (in this way, ie11 is supported, and other browsers need to add corresponding browser prefix).
首先把我的相关代码：
1）html结构代码：
CSS代码将内容复制到剪贴板。
测试
2）js代码（注：js仅用于生成数据）
CSS代码将内容复制到剪贴板。
在window.onload =函数（）{
VaR，= document.getelementsbytagname（'ul）{ 0 }；
对于（var i = 0；i < 9；i + +）{
无功_li = document.createelement（李的）；
_li.innertext = I + 1；
oul.appendchild（_li）；
}
}；
3）CSS代码（关键部分）
CSS代码将内容复制到剪贴板。
UL {
保证金：0px；
填料：0px；
身高：200px；
宽度：100px；
文本对齐：中心；
-moz柱间隙：12px；
-moz列数：1；
-moz列规则：1px solid # d8d8d8；
WebKit的差距：12px柱；
WebKit的列数：1；
Webkit列规则：1px solid # d8d8d8；
柱12px差距；
列计数：1；
列的规则：1px solid # d8d8d8；
}
ul {
身高：50px；
行高：50px；
}
以上代码中最重要的部分是CSS代码部分的实现，这是问题的实现。其主要属性是UL中的高度、宽度和列相关性，以及李的高度属性。
列数代表解体的数量，与柱之间的间隙代表解体的差距，和列规则表示柱之间的分割线。
这是UL将200px，每个李高50px，使它分为二列4时已满。
显示结果如图所示。
以上是对你的小介绍。基于CSS，在每行加载四列后，数据自动填充到下一列中。希望能对你有所帮助。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。