css - 如何在 ui-grid 中统一 ui-block 高度

Question

我在 jQuery Mobile 中对 ui block 的交替行进行 strip 化。共有三列，但当一行中的一个单元格包含与其相邻单元格不同数量的换行时，背景颜色仅填充被占用的行。

例如 ui-block-a(1 行)、ui-block-b(2 行)、ui-block-c(2 行)。如果这是一个条纹行 block b 和 c 将显示 2 行带有背景颜色的文本。 block A 在文本行之后显示一个空行以保持高度一致，但不幸的是，条纹的背景颜色仅显示在 block 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 中的内容。话虽这么说，也许你可以像这样 float 另一个 div 作为你的 block 元素的包装:

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

示例 fiddle found here