Как добавить текстовое поле ввода в два столбца в трехуровневой компоновке ui-grid (33/33/33%)?
Цель состоит в том, что входное текстовое поле занимает 66%, а третий столбец занимает остальные.
Пример ui-grid из jquery mobile:
<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 -->
просто перезапишите свойство 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
Вы можете использовать:
<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%;
}