Question

我是否应该构建一个包含6列的表，我不能这样做，当我构建2个3列的表但我无法并排制作时，我就是一个在另一个之下。我该怎么办？

风格：

<style>
  /*Set 3.colum grid*/
     .ui-grid-b .grid1{
     width=50%;
     align="left";
     }
     .ui-grid-b .grid2{
      width=50%
      align="rigth";
     }   
 </style>

代码：

  <div class="ui-grid-b" id="grid1">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
        <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
        </div><!-- /grid-b  -->

        <div class="ui-grid-b" id="grid2">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
        <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
        </div><!-- /grid-b -->

 </div>

Answer 1

创建两个主要网格ui-grid-a。在每个块中添加两个块ui-block-a和ui-block-b，每个块应该包含ui-grid-b及其子ui-block-a，ui-block-b和ui-block-c。

另外，请使用以下代替内联样式

.ui-block-a  > div.ui-bar, .ui-block-b  > div.ui-bar, .ui-block-c > div.ui-bar {
  height: 120px !important
}

<强> Demo

带有Jquery Mobile的6列表

1 个答案: