使用jQuery Mobile的響應表
[英]Responsive tables with jquery mobile
問題描述
當屏幕寬度變小時，我必須將3張桌子放置在彼此下方。 通常我會使用float: left; 在每個表的周圍容器上，但這不起作用。 它將破壞我的jquery移動布局。
我以為我會做一個小的網格布局 ，但是這會使我的桌子折疊而不是將它們放置在彼此下面。
當屏幕寬度減小時，如何在不使用float且不破壞jquery移動布局的情況下如何將3個表彼此定位？
這是我的頁面布局示例：
<body class="container">
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Title</h1>
</div>
<div data-role="content" data-theme="a">
<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="a" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<div data-role="collapsible" data-collapsed="false">
</div>
<div data-role="collapsible">
<h3>Title</h3>
<div class="ui-grid-b">
<div class="ui-block-a">
<form class="form-search">
<div class="content">
<h3>Title</h3>
<table class="center alfabet">
<tr>
<td>Blabla</td>
<td>Blabla</td>
<td>Blabla</td>
<td></td>
</tr>
</table>
</div>
</form>
</div>
<div class="ui-block-b">
<form class="form-search">
<div class="content">
<table class="center alfabet">
<tr>
<td>Blabla</td>
<td>Blabla</td>
<td>Blabla</td>
<td></td>
</tr>
</table>
</div>
</form>
</div>
<div class="ui-block-c">
<form class="form-search">
<div class="content">
<table class="center alfabet">
<tr>
<td>Blabla</td>
<td>Blabla</td>
<td>Blabla</td>
<td></td>
</tr>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<div data-role="collapsible">
</div>
</div>
</div>
</div>
</body>
1 個解決方案
解決方案1
0 已采納 2013-11-01 13:19:24
.row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";line-height:0;}
.row-fluid:after{clear:both;}
.row-fluid [class*="span"]{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.127659574468085%;*margin-left:2.074468085106383%;}
.row-fluid [class*="span"]:first-child{margin-left:0;}
.row-fluid .span4{width:31.914893617021278%;*width:31.861702127659576%;}
<div class="row-fluid">
<div class="span4">
Table 1 here
</div>
<div class="span4">
Table 2 here
</div>
<div class="span4">
Table 3 here
</div>
</div>
帶有jQuery mobile和ASP.NET Gridview的響應表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.