我正在尝试使用 jquery mobile 中的内置 ui-grid 来实现 3 列布局。
问题是 ui block 内的 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);
或者将其作为函数执行,请参阅http://www.cssnewbie.com/equal-height-columns-with-jquery/
另一方面,如果您不需要 CSS,则有一种使用盒模型的有缺陷/不可靠的方法。 请参阅:http://www.css3.info/introducing-the-flexible-box-layout-module/
另外还有一些 HTML/CSS hack,虽然有效,但会产生“丑陋”的代码。 请参阅:http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
<小时/>jQuery 示例: http://jsfiddle.net/zHbuC/468/
还有一个缩小的示例(仅当内容始终位于 .ui-bar
中时才有效)
var tallest = 0;
$('.ui-grid-b .ui-bar').each(function() {
if($(this).height() > tallest) {tallest = $(this).height();}
}).height(tallest);
关于jquery mobile ui-grid 具有等高的 ui-blocks,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10190723/