jQuery Mobile - 在三列ui-grid布局中跨两列输入字段?

Mic*_*idt 23 layout jquery-mobile

如何在三列ui-grid布局(33/33/33%)中的两列中添加输入文本字段?

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

来自jquery mobile的示例ui-grid:

<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 -->
Run Code Online (Sandbox Code Playgroud)

Mic*_*idt 38

只需覆盖width属性:

.ui-grid-a .ui-block-a { width: 65% }
.ui-grid-a .ui-block-b { width: 35%; } 
Run Code Online (Sandbox Code Playgroud)

http://forum.jquery.com/topic/unequal-layout-grids-columns-or-colspan-like-behavior

  • 这是覆盖JQM CSS所需的绝对最低特异性级别.如果JQM加载另一个您期望50/50行为的页面,则可能会遇到问题(如果JQM能够将新页面Ajax转换为现有DOM,则CSS将不会重新加载).我建议你在想要调整宽度的div块中添加另一个类:.ui-grid-a .ui-block-a.main和.ui-grid -a .ui-block-b.例如,一方.现在你可以在其他地方使用ui-block-a和b在ui-grid-a里面,但仍然可以得到50/50. (10认同)