Layout jQuery Mobile-在三列ui网格布局中跨两列输入字段？

如何在三列ui网格布局（33/33/33%）中跨两列添加输入文本字段

目标是输入文本字段占66%，第三列占其余部分

来自jquery mobile的示例ui网格：

<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div><!-- /grid-a -->

A区
B区
C区

只需覆盖宽度属性：

.ui-grid-a .ui-block-a { width: 65% }
.ui-grid-a .ui-block-b { width: 35%; } 

您可以使用：

A+B区
C区

您需要在下面添加CSS来实现这一点。这可以用于任何jqm网格布局，只需将类ui块span*添加到div块中即可

.ui-grid-b>.ui-block-span2{
宽度：66.6666%；
}
.ui-grid-c>.ui-block-span2{
宽度：50%；
}
.ui-grid-c>.ui-block-span3{
宽度：75%；
}
.ui-grid-d>.ui-block-span2{
宽度：40%；
}
.ui-grid-d>.ui-block-span3{
宽度：60%；
}
.ui-grid-d>.ui-block-span4{
宽度：80%；
}

这是覆盖JQM CSS所需的绝对最低特定级别。但是，如果JQM加载另一个页面，而您期望的是50/50的行为，那么您可能会遇到问题（如果JQM能够将新页面Ajax添加到现有DOM中，CSS将不会重新加载）。我建议您向要调整宽度的div块添加另一个类：.ui-grid-a.ui-block-a.main和.ui-grid-a.ui-block-b.side。现在，您可以在ui-grid-a中的其他位置使用ui-block-a和b，并且仍然得到50/50。