如何在用戶界面中統一UI塊高度

我在jQuery Mobile中劃分了多個UI塊的交替行。有三列，但是當一行中的單元格包含與其鄰居不同數量的包裝行時，背景顏色只會填充佔用的行。例如，ui-block-a（1行），ui-block-b（2行），ui-block-c（2行）。如果這是一個有條紋的行塊b，並且c會用背景顏色顯示兩行文本。塊A在文本行後面顯示一個空白行以保持高度一致，但不幸的是，條紋的背景顏色僅顯示在塊a的第一行上。如何在用戶界面中統一UI塊高度

這裏是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 -->

來源

2012-09-28 Joseph U.

你可以包括你的jQuery和[的jsfiddle]（ http://www.jsfiddle.com）這個問題的演示？ –

是啊，這太糟糕了，沒有row class，類似於您在引導什麼。有了這樣說，也許你可以浮動另一格，成爲您身邊塊項目的包裝是這樣的：

<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

來源

2013-06-25 00:00:43 ScottieMc

如何在用戶界面中統一UI塊高度

回答

相關問題