HTML Fluid Multi Column Layout (newspaper) for text
Is there any CSS technique or a good js technique for laying out content so that you have a "newspaper" like page. Given a div (or whatever) containing a bunch of content to split that content into N columns which total some pre-defined width.
Lets say with an N = 3, assuming my content is sorted A -> Q will render data in开发者_StackOverflow社区 the following way:
A G M
B H N
C I O
D J P
E K Q
F L
Any ideas? I'd like to not split the data on the server before rendering 3 divs so that I don't need to really calculate how the data will be rendered. However that is a last resort that can happen.
I know this is bit late to really answer the Dmitriy, but for anyone passing by this question, here is a github project,from the Financial Times, that will do this for you: FTColumnflow: https://github.com/ftlabs/ftcolumnflow Here is the list of features of the project:
- Configurable column widths, gutters and margins
- Fixed-position elements
- Elements spanning columns
- Keep-with-next to avoid headings at the bottom of a column
- No-wrap class to avoid splitting elements across columns
- Grouping of columns into pages
- Horizontal or vertical alignment of pages
- Standardised line height to align text baseline to a grid
- Rapid reflow as required by events such as device orientation or font-size change
精彩评论