jQuery Mobile: campo de entrada en dos columnas en un diseño de cuadrícula de ui de tres columnas.

Question

¿Cómo puedo agregar un campo de texto de entrada en dos columnas en un diseño de cuadrícula de ui de tres columnas (33/33/33%)?

El objetivo es que el campo de texto de entrada tome el 66% y la tercera columna ocupe el resto.

Ejemplo ui-rejilla de jquery móvil:

<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

simplemente sobrescribir la propiedad de ancho:

.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

que puede usar:

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

Necesita agregar el CSS a continuación para lograr esto. Esto podría usarse con cualquier diseño de cuadrícula jqm simplemente agregando la clase ui-block-span * los bloques de su 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%; 
}