連續浮動div的自動高度？

Question

我正在開發有點alla飼料agregator爲我的客戶。我把它作爲一個完全流暢的響應式佈局，它工作的很好，但是我想做一個小小的調整。

http://www.paulhanak.com/clients/topmb/index.php

我把所有的div向左浮動。當你調整瀏覽器，你會看到它適應，迫使div的下降相應....

所以我成立了所有的div是的220px的固定高度。那麼，有時候這對於底部的很多空間來說都會很方便。有時候，標題足夠長，足以填滿它。最終，將腳本逐行比較並通過找到每個div的最大高度並相應地設置其他高度來進行適當的高度調整將是很好的...

對此有任何其他想法？

Answer 1

我想你定義最小高度：220px;

Answer 2

你可能想看看這裏上提出這一問題的答案檢查。 Vertically aligning floated DIVs with varying heights?

的人使用jQuery來添加其他的div將清除的div兩側的div來排隊叫他們像表。

.clear {clear:both;} 

上面的CSS是我通常使用的。

Answer 3

我想出了以下自定義jQuery代碼來計算div如何排列成行，然後循環遍歷每行併爲行中每個div的內容計算出正確的最大高度，然後設置該行中所有div的高度。

$(window).resize(function() { 
    var $blocks = $('.block'), 
     firstBlockTop = $blocks.first().offset().top, 
     lastOffsetTop = firstBlockTop; 
    var rows = [], 
     currentRow = 0, 
     i, rowCount, j, colCount, height; 
    $blocks.each(function(index, element) { 
     var $div = $(element), 
      thisOffsetTop = $div.offset().top; 
     if (thisOffsetTop !== lastOffsetTop) { 
      currentRow++; 
     } 
     rows[currentRow] = (rows[currentRow] || []); 
     rows[currentRow].push($div); 
     lastOffsetTop = thisOffsetTop; 
    }); 
    console.log(rows); 

    function maxHeight(array) { 
     var maxHeight = -1, 
      innerHeight; 
     for (var i = 0, len = array.length; i < len; i++) { 
      // calculate the actual total height for the inner items 
      innerHeight = 0; 
      array[i].children().each(function() { 
       innerHeight += $(this).outerHeight(true); 
      }); 
      maxHeight = Math.max(innerHeight, maxHeight); 
     } 
     return maxHeight; 
    } 
    // now loop through each row and set the height of each div to the max height for the row 
    for (i = 0, rowCount = rows.length; i < rowCount; i++) { 
     height = maxHeight(rows[i]); 
     console.log('Row ' + i + ', maxHeight = ' + height); 
     for (j = 0, colCount = rows[i].length; j < colCount; j++) { 
      rows[i][j].height(height); 
     } 
    } 
});​ 

您可能會對此代碼做出輕微的性能改進，但希望它能爲您提供良好的基準。自帶權在我腦海

Answer 4

東西是讓你想比較，並獲得它們的價值這些部門的所有高度，然後確定哪些是最高或最短，這個高度適用於其他地區。例如，使用jQuery，讓我們假設它們都具有類「div_box」

$(document).ready(function(){ 
var tallest = 0;  
$('.div_box').each(function() { 
     if(tallest < this.height()){ 
      tallest = this.height() 
     } 
    }); 
}) 

那麼你可以申請同一高度個個：

$('.div_box').each(function() { 
      this.height() = tallest ; 
}); 

總之應該是這樣的：

$(document).ready(function(){ 
    var tallest = 0;  
    $('.div_box').each(function() { 
      if(tallest < this.height()){ 
       tallest = this.height() 
      } 
     }); 

     $('.div_box').each(function() { 
       this.height() = tallest ; 
    }); 
    }) 

最後，如果你想將它們都壽最短的比較：

$(document).ready(function(){ 
    var shortest = 10000; //just give a big value here 
    $('.div_box').each(function() { 
      if(shortest > this.height()){ 
       shortest = this.height() 
      } 
     }); 
    $('.div_box').each(function() { 
        this.height() = shortest ; 
     }); 


})