0

使用 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; }
4

2 回答 2

6

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 });
于 2013-07-13T18:55:05.820 回答
0

通常，作为我用于旧版浏览器的替代方法，将 display:inline-block 设置为具有 columns 预期宽度的子项，减去 column-gap 。

它从左到右改变布局，然后画一条新线。

我宁愿使用显示而不是浮动，因为浮动元素可以挂在中间，其中内联框只是打破线并且可以在一条线上相互垂直对齐。

如果你真的需要从上到下逐列堆叠，没有间隙，你可以调整你的脚本服务器来构建你的列或使用 javascript。

Mansonry javascript 可能是您正在寻找的：http: //masonry.desandro.com/

于 2013-07-13T19:41:06.513 回答