Question

我在jQuery Mobile中删除了ui-blocks的备用行。有三列，但是当一行中的单元格包含与其邻居不同数量的包裹行时，背景颜色仅填充占用的行。

例如ui-block-a（1行），ui-block-b（2行），ui-block-c（2行）。如果这是条纹行块b，则c将显示具有背景颜色的2行文本。块A在文本行之后显示一个空行以保持高度一致但不幸的是条带的背景颜色仅显示在块a的第一行。

这是CSS和HTML

CSS

.stripe {
  background-color: #EAEAEA; 
}

HTML

<div data-role="content">   
    <div class=ui-grid-b>
      <div class=ui-block-a><strong>First Name</strong></div>
      <div class=ui-block-b><strong>Last Name</strong></div>
      <div class=ui-block-c><strong>Organization</strong></div>

      <div class="ui-block-a stripe">Allison</div>
      <div class="ui-block-b stripe">Akhnoukh</div>
      <div class="ui-block-c stripe">Education Consultant</div>

      <div class=ui-block-a>Kemi</div>
      <div class=ui-block-b>Akinsanya-Rose</div>
      <div class=ui-block-c>New York City Department of Education</div>      
    </div>
</div><!-- /content -->

Answer 1

是的，它太糟糕了，没有row class，类似于你在Bootstrap中所拥有的。话虽如此，也许你可以将另一个div作为你的块项目的包装器浮动，如下所示：

<div class=ui-grid-b>
    <div style="float:left;width:100%">
      <div class=ui-block-a><strong>First Name</strong></div>
      <div class=ui-block-b><strong>Last Name</strong></div>
      <div class=ui-block-c><strong>Organization</strong></div>
    </div>

    <div style="float:left;width:100%">
      <div class="ui-block-a">Allison</div>
      <div class="ui-block-b">Akhnoukh</div>
      <div class="ui-block-c">Education Consultant</div>
    </div>

    <div class="stripe" style="float:left;width:100%">
      <div class=ui-block-a>Kemi</div>
      <div class=ui-block-b>Akinsanya-Rose</div>
      <div class=ui-block-c>New York City Department of Education</div>      
    </div>
</div>

示例小提琴found here

如何在ui-grid内统一ui-block高度

1 个答案: