我想在 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;' />