1

我在 jQuery Mobile 中剥离了交替的 ui 块行。共有三列，但是当一行中的一个单元格包含的换行数与其相邻单元格不同时，背景颜色只会填充被占用的行。

例如 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 -->
4

1 回答 1

0

是的，太糟糕了，没有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>

示例小提琴在这里找到

于 2013-06-25T00:00:43.240 回答