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

时间:2011-09-28 10:42:18

标签: javascript jquery jquery-mobile

我对jquery移动框架很新,所以请耐心等待。我正在开发一个项目,我需要以表格格式显示数据。 所以我使用下面的结构来创建左右列。

<div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
        <div id="left" class="ui-block-m">
            <li>Moisture Sensitivity Level (MSL)</li>
        </div>
        <div id="right" class="ui-block-n">
            <li>  3      </li>
        </div>
</div>

但问题是当我在一列中的任何一列中都有一个大字符串而在另一列中有一个较短的字符串时,那么列的高度会变形。 所以,我的问题是如何确保div(我使用的是具有类ui-block-m和ui-block-n的列)具有相同的高度。

任何建议都非常感谢。 在此先感谢!!。

如何确保div为ui-block-m,div为class ui-block-n

1 个答案:

答案 0 :(得分:1)

快速而肮脏:

$(function(){
    var $m = $('.ui-block-m');
    var $n = $('.ui-block-n')
    if($m.height() < $n.height()){
        $m.css('height',$n.height());
    }else if($m.height() > $n.height()){
        $n.css('height',$m.height());
    }
});