Question

我有一个简单的JQuery Mobile网页，其中网格有四个水平对齐的块。每个块都有一些文本描述和一个按钮。

它在桌面浏览器上显示得很好，而在我的android Galaxy手机上显示的块看起来非常挤压，因为它们仍然是水平对齐的。

当屏幕从纵向到横向定向时，如何配置或设置网格以自动对齐块？

<div id="grid1" class="ui-grid-c">
                <div class="ui-block-a">
                    <div class="div-widget" id="divEnterObs">
                        <h2>Enter Observations</h2>
                        <span>View and enter observations by map or form.</span>
                        <a data-ajax="false" href="LocationlistingServlet"
                            data-role="button" id="btnEnterObs" data-theme="a" data-corners="true" data-shadow="true"
                            data-inline="false" data-mini="false">
                            Enter Observations</a>
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="div-widget" id="divManageUserAccess">
                        <h2>Manage user access</h2>
                        <span>Manage and appoint members that can access the app.</span>
                        <a data-ajax="false" href="manageUserAccess.jsp"
                            data-role="button" id="btnManageUserAccess" data-theme="a" data-corners="true" data-shadow="true"
                            data-inline="false" data-mini="false">
                            Manage User Access</a>
                    </div>
                </div>
                <div class="ui-block-c">
                    <div class="div-widget" id="divManageLocations">
                        <h2>Manage locations</h2>
                        <span>Add, update or activate / de-activate locations.</span>
                        <a data-ajax="false" href="#"
                            data-role="button" id="btnManageLocations" data-theme="a" data-corners="true" data-shadow="true"
                            data-inline="false" data-mini="false">
                            Manage Locations</a>
                    </div>
                </div>
                <div class="ui-block-d">
                    <div class="div-widget" id="divAdminTools">
                        <h2>Admin Tools</h2>
                        <span>Execute admin functions.</span>
                        <a data-ajax="false" href="#"
                            data-role="button" id="btnAdminTools" data-theme="a" data-corners="true" data-shadow="true"
                            data-inline="false" data-mini="false">
                            Admin Tools</a>
                    </div>
                </div>
</div>

Answer 1

通过添加＆＃34; ui-responsive＆＃34;来解决问题。

<div id="grid1" class="ui-grid-c ui-responsive">

当使用JQuery Mobile更改移动方向时，如何使网格元素水平到垂直对齐？

1 个答案: