修復不同高度的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基礎網格

回答

相關問題