Question

嘿那里，我有20个div，左边漂浮着不同的高度。我用这个脚本来调整它们的大小。当我的网站使用像素设计时，它工作得很完美。

当我将我的网站更改为％design（百分比设计）时，脚本停止工作可靠，有时它不会调整大小。

你能看一看，看看液体布局是否需要调整？

也许这就是我调用脚本的方式？

非常非常

这是：

var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

function setConformingHeight(el, newHeight) {
 // set the height to something new, but remember the original height in case things change
 el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
 el.height(newHeight);
}

function getOriginalHeight(el) {
 // if the height has changed, send the originalHeight
 return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}

function columnConform() {

 // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
 $('div.column').each(function(index) {

  if(currentRowStart != $(this).position().top) {

   // we just came to a new row.  Set all the heights on the completed row
   for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

   // set the variables for the new row
   rowDivs.length = 0; // empty the array
   currentRowStart = $(this).position().top;
   currentTallest = getOriginalHeight($(this));
   rowDivs.push($(this));

  } else {

   // another div on the current row.  Add it to the list and check if it's taller
   rowDivs.push($(this));
   currentTallest = (currentTallest < getOriginalHeight($(this))) ? (getOriginalHeight($(this))) : (currentTallest);

  }
  // do the last row
  for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

 });

}

$(window).resize(function() {
 columnConform();
});

$(document).ready(function() {
 columnConform();
});

Answer 1

如果你使用这样的样式：

<style>
    .parent{
        background:#F00;height:300px
    }
    .parent div{
        float:left;height:100%;width:33.33%;
    }
</style>
<div class="parent">
    <div style="background:#FED"></div>
    <div style="background:#EDF"></div>
    <div style="background:#DFE"></div>
</div>

您只需设置父div的高度，以及子div的宽度

Answer 2

好吧，如果你把它改成流畅的布局（％设计），那么你将不得不添加一个窗口调整大小的监听器，基本上当resize事件完成或运行时你需要调用脚本以便它可以重新计算新的尺寸，您不需要使用像素，因为它是一个固定的大小，一旦分配，无论您调整实际屏幕的次数多少次都不会改变。

使所有浮动div具有相同高度的脚本

2 个答案: