Question

我正在使用jquery-mobile框架。我有两个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());       
    }

我怎样才能做到这一点？

Answer 1

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

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

Answer 2

工作链接：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，然后选择选择器和设定高度。

Answer 3

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;
}

Answer 4

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

试试这个

Answer 5

两列网格

<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

Answer 6

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

希望这有帮助。

如何确保两个div总是具有相同的高度？

6 个答案: