IE 8的3列输出使用CSS

Question

使用CSS(参见下面的CSS),它适用于所有浏览器.不幸的是,正如预期的那样它在IE 8中不起作用.他们是一种替代方式,我可以为IE 8获得类似的3列输出吗？

#site-map .site-map-box {  
-webkit-column-count: 3;  
-moz-column-count: 3;  
column-count: 3;  
-webkit-column-gap: 250px;  
-moz-column-gap: 250px;  
column-gap: 250px; }

Answer 1

IE8中不支持CSS3列.您可以使用divs 来执行此操作,但这仅在您的内容是静态时才有效.

例如:

<div style="overflow:hidden;">
    <div style="float:left; width:33%;">first third of content</div>
    <div style="float:left; width:33%;">second third of content</div>
    <div style="float:left; width:33%;">third third of content</div>
</div>

对于动态内容,您必须使用javascript.我在网上遇到过这个jQuery插件 - 它应该做你需要的.

$('#mydiv').columnize({ width: 200 , columns: 3 });