文本的 HTML 流体多列布局（报纸）

Question

是否有任何 CSS 技术或良好的 js 技术来布局内容，以便您拥有类似“报纸”的页面。给定一个包含一堆内容的 div（或其他任何内容），以将该内容拆分为 N 列，这些列总共有一些预定义的宽度。

假设 N = 3，假设我的内容排序为 A -> Q 将按以下方式呈现数据：

 A  G  M
 B  H  N
 C  I  O
 D  J  P
 E  K  Q
 F  L  

有什么想法吗？我不想在渲染 3 个 div 之前拆分服务器上的数据，这样我就不需要真正计算数据的渲染方式。然而，这是可能发生的最后手段。

Answer 1

我知道现在回答 Dmitriy 有点晚了，但是对于任何路过这个问题的人，这里有一个来自金融时报的 github 项目，它会为你做这个： FTColumnflow： https://github.com/ftlabs/ftcolumnflow 以下是该项目的功能列表：

• 可配置的列宽、间距和边距
• 固定位置元素
• 跨列的元素
• Keep-with-next 以避免标题位于列的底部
• 无包装类以避免跨列拆分元素
• 将列分组到页面中
• 页面的水平或垂直对齐方式
• 将文本基线与网格对齐的标准化行高
• 根据设备方向或字体大小更改等事件的要求进行快速回流