页面响应在Jquery mobile中不起作用

Question

Actually i want a page as like 2 column,First column with picture & second column with buttons,Also i have given a grid view in jquery mobile Grid A (50/50) ,But for me class:ui-block-b is getting back to next row if i give responsive like a mobile view. 实际上我想要一个像2列一样的页面，第一列带有图片，第二列带有按钮，我也已经在jquery移动Grid A (50/50)给出了网格视图，但是对我来说， class:ui-block-b越来越如果我像移动设备视图一样做出响应，则返回下一行。

HTML code. 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>

Any help is appreciated.. 任何帮助表示赞赏。

screenshot for this issue 此问题的屏幕截图

在此处输入图片说明

Answer 1

Looks like you need to set a width for: 看起来您需要为以下内容设置宽度：

.ui-grid-a .ui-responsive .ui-grid-.ui响应

Also for: 也适用于：

.ui-block-a .ui-block-b .ui-block-a .ui-block-b

You have a width set to 100%, try setting it to 50%. 您将宽度设置为100％，请尝试将其设置为50％。

.ui-block-a .ui-block-b
                        { 
                            width: 50%; 
                            float:none; 
                        }

页面响应在Jquery mobile中不起作用

问题描述

1 个解决方案

解决方案1
0 2014-03-10 15:01:32

页面响应在Jquery mobile中不起作用

问题描述

1 个解决方案

解决方案1 0 2014-03-10 15:01:32

解决方案1
0 2014-03-10 15:01:32