修复不同高度的Zurb基础网格

当每列有“不均匀”高度时，基金会的网格中断，特别是如果全部在一行内。正如你可以从下面的Jsfiddle例子看到的那样。修复不同高度的Zurb基础网格

我不想使用均衡器，因为它会导致我的网站出现真实的性能问题。

我不知道我的PHP代码会生成多少列，所以我不能将它放在单独的行中。

任何一个人都可以解决这个问题？

目前我的解决方案包括预定义每行最大列数，并使用计数器结束并开始新行。但它不是非常敏感。

var col = '<div class="small-3 columns">content</div>', 
 
\t \t row = $('.row'), 
 
    colCount = 30, 
 
    i = 0, 
 
    maxRange = 1000; 
 
    
 
    for(i=0; i<colCount; i++) { 
 
    \t row.append(col); 
 
    } 
 
    
 
    $('.columns').each(
 
    \t function() { 
 
     \t $(this).css({'height':Math.floor((Math.random() * 100) + 1)}); 
 
     } 
 
    );

.columns { 
 
    background-color: red; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="row"> 
 

 
</div>

来源

2017-05-23 aahhaa

你有没有考虑使用他们的弹性盒实现？ http://foundation.zurb.com/sites/docs/flex-grid.html#vertical-alignment-of-child-columns-individual- – mattferderer

我知道弹性盒在那里，但有点太吓人，它如何工作真实生活（兼容性）。你有经验吗？ – aahhaa

你有需要支持的浏览器列表吗？ http://caniuse.com/#search=flexbox是一个有用的资源，如果你不知道。我们支持IE11＆常青浏览器。 Foundation的Flex网格在像您这样的情况下效果非常好。 – mattferderer

更改基金会使用Flex电网https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css与您的代码应该让你更好的结果。 https://jsfiddle.net/k07wktgL/1/

var col = '<div class="small-3 columns">content</div>', 
 
    row = $('.row'), 
 
    colCount = 30, 
 
    i = 0, 
 
    maxRange = 1000; 
 
    
 
for(i=0; i<colCount; i++) { 
 
    row.append(col); 
 
} 
 
    
 
$('.columns').each(
 
     function() { 
 
     $(this).css({'height':Math.floor((Math.random() * 100) + 1)}); 
 
    } 
 
);

.columns { 
 
    background-color: red; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="row"></div>

来源

2017-05-23 20:23:57 mattferderer

修复不同高度的Zurb基础网格

回答

相关问题