如何在Jquery Mobile UI中对齐div（data-role =“horizo​​ntal”）宽度？

Question

我想给div提供10％（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网格。它不会那么简单。

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