1

jQuery Mobile で ui ブロックの行を交互にストライピングしています。3 つの列がありますが、行のセルに隣接する行とは異なる数の折り返された行が含まれている場合、占有されている行だけが背景色で塗りつぶされます。

たとえば、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

そうです、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 に答える