jQuery Mobile 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

网格

jQuery Mobile 提供了一套基于CSS的分列布局。可以通过对class属性设置进行对网格布局。要使用网格需要添加class='ui-grid-solo|a|b|c|d',其中solo|a|b|c|d分别对应了以下的列数:ui-block-a(一列)、ui-block-a|b(两列)、ui-block-a|b|c(三列)、ui-block-a|b|c|d(四列)、ui-block-a|b|c|d|e(五列)。即class 为 ui-grid-b(三列布局),则必须添加 ui-block-a、ui-block-b 和 ui-block-c 的三个子元素。

如下代码是一个三列布局。

<p>三列布局:</p>
<div class="ui-grid-b">
    <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div>
    <div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div>
    <div class="ui-block-c" style="border:1px solid black;"><span>一些文本</span></div>
</div>
练一练两列布局。