0

我正在尝试将Swipe JS 2与 jQuery Mobile 一起使用（仔细考虑此处的注释）。

但是，我发现尝试使用float: left的冲突存在问题。我不能干扰 Swipe JS 2 引用，因此触摸设备上的滑动动作将起作用。

这意味着应该在网格中显示的数据只显示在垂直列中。

在检查应该将显示设置为网格的 CSS 的检查器时，我看到以下内容： 在此处输入图像描述

请注意，似乎只有在触摸设备（手机、平板电脑等）上才能看到滑动动作。

当您运行以下命令时，滑动动作有效，但数据未显示在网格中（jsfiddle 上的代码：http: //jsfiddle.net/u1sonderzug/YSGY3/，jsfiddle上的预览：http: //jsfiddle.net/ u1sonderzug/YSGY3/embedded/result/）：

<html>
    <head>
        <title>Test Slide</title>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
        <script type='text/javascript' src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script type='text/javascript' src="https://raw.github.com/bradbirdsall/Swipe/swipe2/swipe.js"></script>
        <style type='text/css'>
        /* Product CSS */
          
            .product {
            padding-top:10px;
            padding-bottom:10px;
            padding-left:24px;
            padding-right:24px;
            float:left;
        }
        /* Swipe 2 required styles */
        
            .swipe {
            overflow: hidden;
            visibility: hidden;
        }
        .swipe-wrap {
            overflow: hidden;
            position: relative;
        }
        .swipe-wrap div {
            float:left;
            width:100%;
            position: relative;
        }
        </style>
        <script type='text/javascript'>
            $('#home').live('pageshow',function(){
                window.slider = new Swipe(document.getElementById('slider'));
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="home">
          <div data-role="content">
            <!-- Take out the FOLLOWING two lines to display grid correctly -->
            <div id='slider' class='swipe'>
              <div class='swipe-wrap'>
                <!-- Take out the ABOVE two lines to display grid correctly -->
                <div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                </div>
                <div><span><h1>This is the next page</h1></span></div>
                <!-- Take out the FOLLOWING two lines to display grid correctly -->
              </div>
            </div>
            <!-- Take out the ABOVE two lines to display grid correctly -->
          </div> 
        </div>
    </body>
</html>

​</p>

当您运行以下命令时，滑动动作不起作用，但数据确实显示在网格中（jsfiddle 上的代码：http: //jsfiddle.net/u1sonderzug/JZQQY/，jsfiddle上的预览：http: //jsfiddle.net /u1sonderzug/JZQQY/embedded/result/ ):

<html>
    <head>
        <title>Test Slide</title>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
        <script type='text/javascript' src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script type='text/javascript' src="https://raw.github.com/bradbirdsall/Swipe/swipe2/swipe.js"></script>
        <style type='text/css'>
        /* Product CSS */
          
            .product {
            padding-top:10px;
            padding-bottom:10px;
            padding-left:24px;
            padding-right:24px;
            float:left;
        }
        /* Swipe 2 required styles */
        
            .swipe {
            overflow: hidden;
            visibility: hidden;
        }
        .swipe-wrap {
            overflow: hidden;
            position: relative;
        }
        .swipe-wrap div {
            float:left;
            width:100%;
            position: relative;
        }
        </style>
        <script type='text/javascript'>
            $('#home').live('pageshow',function(){
                window.slider = new Swipe(document.getElementById('slider'));
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="home">
          <div data-role="content">
           
                <div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                  <div class="product"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/NCI_Visuals_Food_Hamburger.jpg/220px-NCI_Visuals_Food_Hamburger.jpg" /></div>
                </div>
                <div><span><h1>This is the next page</h1></span></div>
               
          </div> 
        </div>
    </body>
</html>

​</p>

4

1 回答 1

2

更改您的 .product 样式以添加宽度： auto !important; 像这样的行：http: //jsfiddle.net/b3Jyv/

 .product {
        padding-top:10px;
        padding-bottom:10px;
        padding-left:24px;
        padding-right:24px;
        float:left;
        width: auto !important;
    }

包含每个图像的 div 通过 .swipe-wrap div 样式规则集将其宽度设置为 100%，因此在网格布局中没有两个产品相邻的空间。

我无法弄清楚如何在手机上更改 jsFiddle 上的窗口大小，所以我没有设法对其进行测试（当我查看它时，页面上没有足够的空间容纳两列），但上面是产品出现在列中的原因，因此如果该列不起作用，您应该能够从那里找到解决方案。

于 2012-12-10T16:18:52.583 回答