jQueryMobile的(九) 网格布局

最新推荐文章于 2022-02-05 19:42:14 发布

游可

最新推荐文章于 2022-02-05 19:42:14 发布

阅读量2.2k

点赞数

分类专栏： jQuery Mobile 文章标签： jQuery Mobile

本文链接：https://blog.csdn.net/bao990423420/article/details/14002865

版权

jQuery Mobile 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

jQuery Mobile提供的CSS样式“ui-grid”可以实现内容的网格布局。该样式有4种预设的配置布局：“ui-grid-a”、“ui-grid-b”、“ui-grid-c”、“ui-grid-d”，分别对应两列、三列、四列、五列的网格布局形式，可以最大范围满足页面多列的需求。

使用网格布局时，整个宽度为100%，无任何“padding”和“margin”及背景色，因此不会影响到其他元素放入网格中的位置

代码如下：

<!DOCTYPE html>
<html>
<head>
   <title>导航栏</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, 
          initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 

  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

</head>

<body>
  
  <div data-role="page">

    <div data-role="header"><h1>头部标题栏</h1></div>

     <div data-role="content">

  <div class="ui-grid-a"> 
        <div class="ui-block-a"><img src="s.png"></div>  
        <div class="ui-block-b"><img src="s.png"></div>  
        </div>

 <div class="ui-grid-b"> 
        <div class="ui-block-a"><img src="s.png"></div>  
        <div class="ui-block-b"><img src="s.png"></div>  
        <div class="ui-block-c"><img src="s.png"></div> 
        </div>

 <div class="ui-grid-c"> 
        <div class="ui-block-a"><img src="s.png"></div>  
        <div class="ui-block-b"><img src="s.png"></div>  
        <div class="ui-block-c"><img src="s.png"></div> 
        <div class="ui-block-d"><img src="s.png"></div> 
        </div>

<div class="ui-grid-d"> 
        <div class="ui-block-a"><img src="s.png"></div>  
        <div class="ui-block-b"><img src="s.png"></div>  
        <div class="ui-block-c"><img src="s.png"></div> 
        <div class="ui-block-d"><img src="s.png"></div> 
        <div class="ui-block-e"><img src="s.png"></div> 
        </div>


  </div>


</body>
</html>

截图如下：

游可

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQueryMobile的(九) 网格布局

jQuery Mobile提供的CSS样式“ui-grid”可以实现内容的网格布局。该样式有4种预设的配置布局：“ui-grid-a”、“ui-grid-b”、“ui-grid-c”、“ui-grid-d”，分别对应两列、三列、四列、五列的网格布局形式，可以最大范围满足页面多列的需求。使用网格布局时，整个宽度为100%，无任何“padding”和“margin”及背景色，因此不会影响到其他
复制链接

扫一扫