2

我想在 jQuery mobile 中创建一个内容页面,其中我在 jquery mobile 的内容区域中有 2 个 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;' />
4

1 回答 1

1

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

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

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

于 2013-04-19T20:36:42.233 回答