如何確保兩個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始終具有相同的高度？

回答

相關問題