internet-explorer - 使用 CSS 的 IE 8 的 3 列输出

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 列。您将能够使用 div 执行此操作，但是这仅在您的内容是静态时才有效。

例如:

<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。我遇到过this jQuery plugin在线 - 它应该满足您的需求。

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