如何使用 jQuery Mobile 创建两列网格和两列布局？

jQuery Mobile 提供了基于 CSS 的响应式列。网格的宽度为 100%，网格没有背景颜色、边框和填充。

网格中包含元素，这些元素可以使用ui-block-a或ui-block-b或ui-block-c或ui-block-d类并排浮动。网格中的列等宽。在 2 列网格中，两个网格宽度各为 50%。对于样式，我们可以使用ui-bar类。

CDN 链接：

方法：

• 将上述 CDN 链接添加到 HTML 页面。
• 在正文中，创建一个类为ui-grid-a的 div 元素。
• 在 div 元素中，创建两个 div 元素，第一个 div 的类为ui -block-a，第二个 div 的类为ui-block-b 。
• 将 body 的 line-height 设置为 0。

示例 1：

HTML

  

    
    
    
  
    
        body {
            line-height: 0 !important;
        }
    

  

    
        
            
                Column 1
            
        
          
        
            
                Column 2
            
        
    

  

输出：

示例 2：以下代码演示了提交和取消按钮，它们是互联网世界中非常常见的按钮。

HTML

  

    
  
    
    
  
    
        fieldset {
            border: 0;
        }
  
        .submit {
            background-color: rgb(38, 134, 158);
        }
  
        .cancel {
            background-color: rgb(233, 155, 10);
        }
    

  

    
        
            CANCEL
        
  
        
            SUBMIT
        
    

  

输出：