实际上我想要一个像 2 列一样的页面，第一列有图片，第二列有按钮，我还在 jquery mobile 中给出了一个 GridView Grid A (50/50) ，但对我来说 class:ui-block-b 如果我像移动 View 一样提供响应，就会返回到下一行。
HTML 代码。
<!DOCTYPE html>
<html>
<head>
<title>
Child List
</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<style>
#pageone
{
background-color:#F3BFD0;
}
#opacity
{
opacity:0.5;
background-color: #ffffff;
margin-top: -23px;
width:150px;
}
.image
{
width:150px;
}
.ui-block-a .ui-block-b
{
width: 100%;
float:none;
}
</style>
</head>
<body>
<div data-role="page" data-theme="c" id="pageone">
<div data-role="header">
<h1>My Children</h1>
</div>
<div data-role="main" class="ui-content">
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a" >
<img src="baby.jpg" class="image"/>
</div>
<div id="opacity">
Jack
</div>
<div class="ui-block-b" align="center" >
<img src="1.png" class="ui-btn ui-corner-all ui-shadow" data-theme="b"/>
<img src="2.png" class="ui-btn ui-corner-all ui-shadow" data-theme="c"/>
</div>
</div>
</div>
</div>
</body>
</html>
感谢任何帮助..
这个问题的截图
最佳答案
看起来您需要为以下设置宽度:
.ui-grid-a .ui-responsive
也适用于:
.ui-block-a .ui-block-b
您将宽度设置为 100%，请尝试将其设置为 50%。
.ui-block-a .ui-block-b
{
width: 50%;
float:none;
}
关于javascript - 页面响应在 Jquery Mobile 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22301527/