jquery-ui - 如何在 Jquery Mobile UI 中对齐 div(data-role="horizo​​ntal") 宽度？

Question

我想给 10% 给 div(class='ui-block-a')，剩下的给 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%。但它是平等的。

Answer 1

所以你想定制一个 jQM 网格。事情不会那么简单。

为什么不尝试使用第 3 方 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>