问题
I've stumbled across a really great project (CSS3 PIE) today that makes it possible to use CSS3 rounded corners, shadows and gradients even in IE6, IE7 and IE8 using CSS settings and usual CSS3 notation.
It uses *.htc file that does the trickery and makes it really transparent for developers (as in set it and forget it - no additional script calls when creating new pages or changing existing ones (provided you don't change CSS)).
I wonder if there's anything similar for multi column layout that can be used. Floating is not an option because content is not laid out top to bottom - left to right, but rather left to right - top to bottom...
Anybody developing something similar for CSS3 multi column layout?
回答1:
Maybe the Columnizer jQuery Plugin?
Unfortunately, it doesn't parse your stylesheet and look for the relevant properties like CSS3 PIE does (a very convenient feature).
Both CSS3 PIE and that plugin rely on JavaScript.
回答2:
Another solution for lists that should flow in column order (as in phonebooks)
I asked the question mainly because I had to display a list of about 1000 users. This kind of list is very long and involves a lot of scrolling. So I needed a solution to put these users in columns so they also flow from top to bottom column by column from left to right. CSS3 multi-column layout provides exactly what I need, but browser support is the problem. They're still not supported on IE9 and my users mainly use IE (8 or 9). Hence I needed a solution to work using CSS2.1
That's the reason I've written a jQuery plugin that takes a set of elements that are either set to float: left/right; or display: inline-block; and transposes them so they're ordered in the order of column layout.
Plugin reorders elements and doesn't add any column wrappers or anything. It just rearranges elements so they seem to be flowing in columns instead of rows.
You can check my blog post where the problem is detailed and you can also see a working example that rearranges/transposes US States. Or you can also watch the project on GitHub and get updates when a new version is out (or report issues you may have with it).
回答3:
If you have simple list items, this might be enough https://github.com/hamsterbacke23/multicolumn-polyfill
回答4:
you might like to try this one..
CSS3 Multi Columns
it's been a while since I tested it out, but it does mean you use the proposed properties so it can be used as an enhancement
I'll see if I can find my test case to put in a fiddle
Update
here's the Example fiddle
Notes (and disclaimer) it's been couple years since I did this demo, it won't work natively from the fiddle (what you'll see is what the browser actually supports), - for the script to work the CSS has to be in a linked file, which I don't think I can do on a fiddle, it puts it inline
Top half is showing what is supported or what the script can do if you download it, bottom is a (table based) mockup up of expectations according to the recs (though remember I said it's a few years since I did this)
neither Safari nor Firefox matches the "Expected: Table Mockup demo" but all browsers I tested in locally look the same.. with nice neat even columns, IE7 gets it 50% right it has 3 columns but only uses 2 of them?? - no browser does the heading spanning multiple rows, either natively or with the script, so I put that down to "a not yet decided upon feature" ;)
anyway just throwing it out there as an option - maybe someone with more savvy than me could improve the script?
来源：https://stackoverflow.com/questions/5670983/css3-multi-column-layout-ie-workaround