Html 带有Jquery Mobile的6列表

如果我建立一个有6列的表，我就做不到了，当我建立了两个有3列的表，但我不能把它们并排的时候，我是一个比另一个低。我该怎么办

风格：

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

/*设置3.5柱网格*/
.ui-grid-b.grid1{
宽度=50%；
align=“left”；
}
.ui-grid-b.grid2{
宽度=50%
align=“rigth”；
}   

守则：

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

A.
B
C
A.
B
C
A.
B
C
A.
B
C

创建两个主网格

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
}

---

如果没有内联样式，效果会更好