连续浮动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 ; 
     }); 


})