jquery - 带有相等高度的ui块的jquery移动ui-grid

我正在尝试将jquery mobile中的内置ui-grid用于3列布局。

问题是当ui块中的ui栏具有不同的高度时。我希望所有3列的高度都与最高的列相同。

有谁知道这个问题的简单解决方案？我只想用CSS来解决它，但是我没有管理它。 JS真的是解决此问题的唯一方法吗？

JsFiddle：
http://jsfiddle.net/zHbuC/466/

码：

<div data-role="page" id="station" class="type-home">
    <div data-role="header"><h1>Header Page 1</h1></div>

    <div data-role="content" data-theme="b">
        <div class="ui-grid-b" style="text-align:center">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-c">A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-c">B</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-c">
                    <p>B with alot of text</p>
                    <p>with lots of lines</p>
                    <p>another line</p>
                </div>
            </div>
        </div>
    </div>

    <div data-role="footer"><h4>Footer</h4></div>
</div>

最佳答案

以我的经验，唯一的“可靠”解决方案是使用简单的jquery高度比较。只需要几行。

var tallest = 0;
$('.ui-grid-b > div').each(function() {
    var thisHeight = $(this).height();
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
});
$('.ui-grid-b .ui-bar').height(tallest);

或将其作为功能来执行，请参见

另一方面，如果您不希望使用CSS，则可以使用box-model进行错误/不可靠的测试。
参见：http://www.cssnewbie.com/equal-height-columns-with-jquery/

除此之外，还有一些HTML / CSS骇客虽然可以工作，但会产生“难看的”代码。
参见：http://www.css3.info/introducing-the-flexible-box-layout-module/



jQuery示例：
http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

还有一个缩小的示例（仅当内容始终在.ui-bar中时有效）

var tallest = 0;
$('.ui-grid-b .ui-bar').each(function() {
    if($(this).height() > tallest) {tallest = $(this).height();}
}).height(tallest);

关于jquery - 带有相等高度的ui块的jquery移动ui-grid，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10190723/