如果我使用Javascript和CSS为数据库动态获取文本,如何将文本分成列？

Question

我认为一个脚本使每个容器中的一定数量的字符都可以工作.你知道那样的剧本吗？这是一个响应式设计,我可以使用几个CSS文件,但我只需要一个html文件:

问题是在文本中,我会动态地得到,所以我不知道我会得到多少个字符.在桌面大小中,段落排列在其他段落之上.在Ipad大小中,段落排列成两列,一些在右侧,一些在左侧.

Answer 1

您可以使用CSS3 columns来单独使用CSS 来完成该任务,尽管IE8及以下版本不支持它;

div {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 560px;
}

作为IE的后备,你可以使用条件评论和其他海报建议的jQuery Masonry或Columnizer.

在IE中优雅降级的演示.