Question

实际上我想要一个页面就像2列，第一列有图片＆amp;带按钮的第二列，我也在jquery mobile Grid A (50/50) 中给出了一个网格视图，但对我来说， class:ui-block-b 正在回到下一行我像移动视图一样提供响应。

HTML code。

<!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>

感谢任何帮助..

此问题的屏幕截图

enter image description here

Answer 1

您需要为：

设置宽度

.ui-grid-a .ui-responsive

也适用于：

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

您将宽度设置为100％，尝试将其设置为50％。

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

页面响应不适用于Jquery mobile

1 个答案: