Question

我正在使用： jquery-1.8.2和jquery-mobile-1.2.0（在检查所有选项的情况下生成）

目标设备是iPhone 4 / 4s / 5和iPad。

当前的data-role =“listview”：

目前的代码：

<div data-role="page">

<div data-role="header" data-position="fixed">
<h1>Test</h1>
</div>

<div data-role="content">   

<div class="content-primary">   
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="pics/paul_jones.jpg" />
<h3>First Element</h3>
<p>First</p>
</a></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Test</a>
</li>
<li><a href="index.html">
<img src="pics/ray_moore.jpg" />
<h3>Second Element</h3>
<p>Second</p>
</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Test</a>
</li>
<li><a href="index.html">
<img src="pics/lisa_wong.jpg" />
<h3>Third Element</h3>
<p>Third</p>
</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Test</a>
</li>
</ul>
</div>      
</div>
</div>
</body>
</html>
</pre>

最好的方法是让每个项目自动调整其高度以垂直拉伸到全屏（我看到框架处理非常好的水平拉伸），因此在这种情况下每行占屏幕的33％，并相应调整图像大小？显然，当有四个或更多项目时，这必须起作用。

在我的网站主页中，我希望有三个或四个“图像按钮”，我就是这样设计的。

<b>#button_id .ui-btn-inner</b> 
background: url("../img/button_image.png") no-repeat rgba(0, 0, 0, 0.4);
background-size: 100% 100%;

垂直填充屏幕自动恢复。

JQM水平高度自动调整（列表视图和按钮）

0 个答案: