如何确保两个div始终具有相同的高度？

我正在使用jquery-mobile框架。我有两个div并排（作为列），我试图保持它们的高度相同，而不管它们包含多少数据。如何确保两个div始终具有相同的高度？

这在html：

<ul class="datablock" id="Manufacturing_and_Qualification_Information" style="display: none;">  
<div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical"> 
    <div data-theme="d" id="paramBlk" class="ui-block-m"><li>Blah Blah Blah Blah Blah</li></div> 
    <div data-theme="d" id="valueBlk" class="ui-block-n"><li>Blah</li></div> 
</div> 
<div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical"> 
    <div class="ui-block-m" id="leftBtmRnd"><li>Blah Blah Blah Blah Blah</li></div> 
    <div class="ui-block-n" id="rightBtmRnd"><li>Blah</li></div> 
</div> 
</ul>

这是jQuery的代码，我试过所以，但它不是按预期工作：

var $blockM = $(".datablock").find('.ui-block-m'); 
    var $blockN = $(".datablock").find('.ui-block-n');     
    if($blockM.height() < $blockN.height()){  
     $blockM.css('height',$blockN.height());   
    }else if($blockM.height() > $blockN.height()){ 

     $blockN.css('height',$blockM.height());  
    }

我怎样才能做到这一点？

来源

2011-09-29 Vivek

使用表格在表格中显示数据？ –

为什么你在'ul'中直接包含'div'标签？ –

正如我所说这是一个移动应用程序...所以我需要显示在UL LI格式的数据.. – Vivek

工作环节：http://jsfiddle.net/bMMpz/1/

下面是代码：

var biggestHeight = 0; 
var $blockM; 
var $blockN; 

$(function() { 
    $blockM = $(".datablock").find('.ui-block-m'); 
    $blockN = $(".datablock").find('.ui-block-n'); 

    getBiggestHeight(); 

    $blockN.height(biggestHeight); 
    $blockM.height(biggestHeight); 
}); 



function getBiggestHeight() { 
    $blockM.each(function(i, e) { 
     if ($(e).height() > biggestHeight) biggestHeight = $(e).height() 
    }); 
    $blockN.each(function(i, e) { 
     if ($(e).height() > biggestHeight) biggestHeight = $(e).height() 
    }); 
}

我找最大的DIV，然后选择两个选择和设置高度。

来源

2011-09-29 06:29:52

没有必要在DOM-ready方法之外拥有方法和变量，只需将其用作方法内的私有变量即可，并且如果getBiggestHeight想要添加更多项，getBiggestHeight可能是更一般的方法：http：/ /jsfiddle.net/bMMpz/2/ – voigtan

:)谢谢！更充足和整洁。好的一个 –

感谢buddy ..它的工作正常...但我遇到1更多的问题..当我调整窗口内的div内部显示外部...我怎么能解决这个问题.. – Vivek

我们使用一个名为'equalheights'的jquery插件（我猜）为此。似乎有几个在那里，但他们似乎都做同样的工作。（我没有在我们的项目中选择这个，所以我不知道它究竟是我们使用的，但它们看起来有点相同）

看看this plugin或this plugin，我认为他们做你想做的事。

来源

2011-09-29 06:21:20 Nanne

这是不好的插件用于这样一个小东西...我可以说，这只是一个4至5行jQuery代码的问题.. – Vivek

你真的可以给出理由吗？该插件非常小巧，它只是您从哪里获取代码的问题：您声明的函数或您加载的代码。这是一个微观优化，认为“插件”（它真的只是一个函数）需要更多时间。看到这需要几次尝试才能做到这一点，为什么重新发明轮子？你甚至可以复制代码，如果它让你感觉更好，但没有真正的理由。 – Nanne

if($blockM.height() < $blockN.height()) 
{    
    $blockM.height($blockN.height());    
}else if($blockM.height() > $blockN.height()) 
{ 
    $blockN.height($blockM.height()); 
}

试试这个

来源

2011-09-29 06:30:33 run

两柱网

<div class="ui-grid-a"> 
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> 
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div> 
</div>

Just look in jQuery Mobile

来源

2011-09-29 06:32:58

正如你可以在我的html标记中看到的，我已经使用了与jquery移动链接中写入的相同的类。 – Vivek

但是，你已经用UL包装，然后使用LI来显示内容。 – 2011-09-29 11:30:50

function equalHeight(group) { 
    tallest = 0; 
    group.each(function() { 
    thisHeight = $(this).height(); 
    if(thisHeight > tallest) { 
    tallest = thisHeight; 
    } 
    }); 

    group.height(tallest); 

    } 
    $(document).ready(function() { 
    equalHeight($(".ui-grid-m")); 
    });

或者使用CSS3

.datablock 
{ display:table; 
} 
.ui-grid-m 
{ display:table-cell; 
}

来源

2011-09-29 06:37:55 Sanooj

对于css3风格+1。 – Vivek

$(document).ready(function({ 
    var x = $('#primary').height(); 
    $('#sidebar').css('height', x); 
});

希望这会有所帮助。

来源

2011-09-29 06:56:02 GoGoGarrett

如何确保两个div始终具有相同的高度？

回答

相关问题