0
我使用jQuery移動1.4.0創建一個Web應用程序小，我只能和創建響應列表。我有以下代碼（我已經刪除了PHP作爲不相關的！）jQuery Mobile的響應列表設計
<div class='bespoke-bp'>
<ul data-role='listview' data-inset='true' data-divider-theme='a'>
<li data-role='list-divider'>
<div class='container_12'>
<div class='grid_15'>
<div class='ui-grid-b'>
<div class='ui-block-a'><div class='ui-bar ui-bar-a' style='height:15px'>Type</div></div>
<div class='ui-block-b'><div class='ui-bar ui-bar-a' style='height:15px'>Number</div></div>
<div class='ui-block-c'><div class='ui-bar ui-bar-a' style='height:15px'>Primary</div></div>
</div>
</div>
</div>
</li>
<li>
<div class='container_12'>
<div class='grid_15'>
<a href='#phoneOrEmail' data-rel='popup' data-position-to='window' data-transition='pop' >
<div class='ui-grid-b'>
<div class='ui-block-a'><div id='contactDesc' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['description'] . "</div></div>
<div class='ui-block-b'><div id='contactNo' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['number'] . "</div></div>
<div class='ui-block-c'><div id='contactPri' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['thePriNo'] . "</div></div>
</div>
</a>
</div>
<div class='grid_120'>
<a href='#editContact' data-rel='popup' data-position-to='window' data-transition='pop' style='padding:0px; margin:0px; border:0px; float: right;' class='ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-notext'>Edit</a>
</div>
</div>
</li>
</ul>
</div> <!-- BESPOKE-BP end -->
，我有這個很基本的響應CSS：
/* stack all grids below 40em (640px) */
@media all and (max-width: 35em) {
.bespoke-bp .ui-block-a,
.bespoke-bp .ui-block-b,
.bespoke-bp .ui-block-c,
.bespoke-bp .ui-block-d,
.bespoke-bp .ui-block-e {
width: 100%;
float: none;
}
}
/* Position the title next to the rank, pad to the left */
.bespoke-bp .list-divider .ui-block-a,
.bespoke-bp .list-divider .ui-block-b,
.bespoke-bp .list-divider .ui-block-c,
.bespoke-bp .list-divider .ui-block-d,
.bespoke-bp .list-divider .ui-block-e {
margin-top: -2.1em;
padding-left: 2.2em;
border-bottom: 1px solid rgba(0,0,0,.15);
}
我想使這更「花哨」，如不是頭都只是堆疊在彼此的頂部，他們得到把每行如：
類型
thetype
數
數量寫
初級
theprimary
爲EA排。
是任何人都可以點我在正確的方向與此，因爲我真的不知道從哪裏開始！
感謝
事情是這樣的：http://jsfiddle.net/ez安克/ N2qpD /？您還可以看看回流表：http://demos.jquerymobile.com/1.4.2/table-reflow/ – ezanker
您好感謝您的回覆！那是偉大的，但是當你有一個以上的排它仍然顯示每行的頭，我想這當列表響應纔會發生。你知道這個方法嗎？ http://jsfiddle.net/N2qpD/1/ – Janey
是的，看到我的回答如下...... – ezanker