如何對齊div（data-role =「horizo​​ntal」）Jquery Mobile UI中的寬度？

Question

我想給div（class ='ui-block-a'）10％，剩下的div（class ='ui-block-b'）。但是我無法做到這一點？

div(data-role="horizontal", data-theme="a", class="ui-bar ui-grid-a",data-overlay-theme="a", data-inline="true") 
      div(class='ui-block-a',style="width:10%;) 
      div(class='content-primary') 
         ul(data-role='listview') 
          li 
           a(href="acura.html") Acura 
      div(class='ui-block-b', style="width:90%;) 
       img(src='/images/sample.jpg', width='500', height='590', style='margin:8px 10px 10px 20px;') 

我的輸出是：

但我想10％的左側和右側中的90％side.But它同樣分享。

Answer 1

所以你想定製一個jQM網格。這不會那麼簡單。

爲什麼不嘗試使用第三方jQuery移動網格插件。它可以配置好得多然後原之一，只需要一個額外的css文件：

這個插件被稱爲960網格，它可以在這裏找到：http://jeromeetienne.github.com/jquery-mobile-960/

同樣這裏是你想與該網格實現什麼： http://jsfiddle.net/Gajotres/jbGx4/

<div data-role="content"> 
     <fieldset class="container_12"> 
     <div class="grid_2"><a data-role="button">2</a></div> 
     <div class="grid_10"><a data-role="button">10</a></div> 
     </fieldset>   
    </div>