Question

我有三个列div我想调整大小以便它们都是相同的长度。我已经能够通过执行以下功能在页面加载时执行此操作（我在SO上找到了它，但遗憾的是我现在无法找到它给予归属，如果我能找到它会更新）：

function resizeIt()
{   
var largest = 0;

$(".feature").each(function(){ //loop through each section
   var findHeight = $(this).height(); //find the height

   if(findHeight > largest){ //see if this height is greater than "largest" height
      largest = findHeight; //if it is greater, set largest height to this one
   }
});

$(".feature").css({"height":largest+"px"});
}

这很好用，但我也希望每次窗口调整大小时调整div。所以我修改了函数，然后每次窗口调整大小时调用它，然后在页面加载时调用函数。这是修改后的函数（第一行函数是加法）加上窗口调整大小的函数调用：

function resizeIt()
{
$(".feature").css({"height: auto"});

var largest = 0;

$(".feature").each(function(){ //loop through each section
   var findHeight = $(this).height(); //find the height

   if(findHeight > largest){ //see if this height is greater than "largest" height
      largest = findHeight; //if it is greater, set largest height to this one
   }
});

$(".feature").css({"height":largest+"px"});
}
resizeIt();   

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

现在我的div在页面加载或页面调整大小时没有正确调整大小。什么都没发生。如果我在我的函数中添加某种警报，则在

时不会调用它

$(".feature").css({"height: auto"});

行包含在函数中。为什么这行破坏了我的代码？当我在第一行调用它时，该对象确实存在，因此它不是空对象。

Answer 1

为什么不尝试使用媒体查询调整大小？这将允许div在窗口大小调整时调整大小而不需要页面重新加载

@media (max-width: 1200px) {
.feature {
/*new height value*/
/*new width value*/
}
}
@media (max-width: 767px) {
.feature {
/*new height value*/
/*new width value*/
}
}

在窗口调整大小时，将div调整为auto，然后调整到彼此相同的高度？

1 个答案: