Question

我想在jQuery mobile中创建一个内容页面，其中我在jquery mobile的内容区域中有两个div，一个在另一个上面。问题是当屏幕尺寸改变时，下面的div会在上面的div上面。我想要的是，当屏幕尺寸改变时，它保持一个在另一个上面的相同div结构。我想知道我是否可以使用网格，但我不确定网格是否适用于1列而是2行？

我的代码如下：

CSS

 #songName {
    text-align:center;
    width: 100%;
    height: 20px;
}

#songPicture {
    text-align:center;
    width: 100%;
    height: 50%;
}

HTML

<div data-role="content" style="height: 100%">
    <div id="songName"></div>
    <div id="songPicture"></div>
</div>

请注意div的内容来自JSON，而id songName是纯文本，id songPicture内容如下所示：

<img src='"image url+"' style='position: absolute; left: 50%; margin-left: -128px; top: 50%; margin-top: -171px; width: 256px; height: 256px;' />

Answer 1

为每个div使用ui-grid-solo类。

<div class='ui-grid-solo'>
 Contents 
</div>

参考：http://jquerymobile.com/demos/1.2.0-beta.1/docs/content/content-grids.html

使用百分比来操纵div jQuery Mobile的高度

1 个答案: