用于文本的HTML流体多列布局(报纸)

时间:2011-04-27 01:47:20

标签: css

是否有任何CSS技术或良好的js技术来布局内容,以便您有一个像报纸一样的页面。给定一个包含一堆内容的div(或其他),将该内容拆分为N列,这些列总共有一些预先定义的宽度。

假设我的内容已分类为A - > Q将以下列方式呈现数据:

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

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

2 个答案:

答案 0 :(得分:5)

我知道真的回答Dmitriy已经有点迟了,但是对于任何通过这个问题的人来说,这是一个来自英国“金融时报”的github项目,它将为您做到这一点: FTColumnflow: https://github.com/ftlabs/ftcolumnflow 以下是该项目的功能列表:

  • 可配置的列宽,装订线和边距
  • 固定位置元素
  • 跨栏的元素
  • 保持旁边以避免列底部的标题
  • 无包装类以避免跨列拆分元素
  • 将列分组为页面
  • 页面的水平或垂直对齐
  • 将文本基线与网格对齐的标准化线高
  • 设备方向或字体大小更改等事件所需的快速回流

答案 1 :(得分:3)