Javascript 调整窗口大小时,是否将div调整为自动,然后再调整为彼此相同的高度?
我有三列div,我想调整大小,使他们都是相同的长度。我已经能够通过执行我在上找到的以下函数在页面加载时执行此操作,因此,尽管很遗憾,我现在无法找到它以提供属性,但如果我能找到它,将进行更新:Javascript 调整窗口大小时,是否将div调整为自动,然后再调整为彼此相同的高度?,javascript,jquery,html,css,resize,Javascript,Jquery,Html,Css,Resize,我有三列div,我想调整大小,使他们都是相同的长度。我已经能够通过执行我在上找到的以下函数在页面加载时执行此操作,因此,尽管很遗憾,我现在无法找到它以提供属性,但如果我能找到它,将进行更新: function resizeIt() { var largest = 0; $(".feature").each(function(){ //loop through each section var findHeight = $(this).height(); //find the hei
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"});
函数中包含行。为什么这一行破坏了我的代码?当我在第一行调用该对象时,它确实存在,因此它不是空对象。为什么不尝试使用媒体查询调整大小?这将允许div在调整窗口大小时调整大小,而无需重新加载页面
@media (max-width: 1200px) {
.feature {
/*new height value*/
/*new width value*/
}
}
@media (max-width: 767px) {
.feature {
/*new height value*/
/*new width value*/
}
}
它应该是$.feature.css{height:auto}@伊莎蒂,就是这样。谢谢你,谢谢你的提示,但这不是我想要的。这些div中的内容会不时地发生变化,因此我不希望设置具体的高度。