jQuery Mobile - поле ввода между двумя столбцами в макете пользовательского интерфейса с тремя столбцами?

Question

Как добавить текстовое поле ввода в два столбца в макете пользовательской сетки с тремя столбцами (33/33/33%)?

Цель состоит в том, чтобы текстовое поле ввода занимало 66%, а третий столбец занимал остальные.

Пример ui-grid с мобильного jquery:

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

Answer 1

просто перезаписать свойство width:

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

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

Answer 2

Вы можете использовать:

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

Вам нужно добавить CSS ниже для достижения этой цели. Это можно использовать с любым макетом сетки jqm, просто добавив класс ui-block-span * ваши блоки div.

.ui-grid-b > .ui-block-span2 {
  width: 66.6666%;
}
.ui-grid-c > .ui-block-span2 {
  width: 50%;
}
.ui-grid-c > .ui-block-span3 {
  width: 75%;
}
.ui-grid-d > .ui-block-span2 {
  width: 40%;
}
.ui-grid-d > .ui-block-span3 {
  width: 60%;
}
.ui-grid-d > .ui-block-span4 {
  width: 80%;
}