jquery - css float : left clash/collision, 如何避免？-6ren

jquery - css float : left clash/collision, 如何避免？

转载作者：太空宇宙更新时间：2023-11-04 04:49:13

我正在尝试使用 Swipe JS 2使用 jQuery Mobile(仔细考虑注释 here )。

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

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

在检查应将显示设置为网格的 CSS 检查器时，我看到以下内容: enter image description here

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

当您运行以下命令时，滑动 Action 有效，但数据不显示在网格中(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>

当您运行以下命令时，滑动 Action 不起作用，但数据确实显示在网格中(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>

最佳答案

更改您的 .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 的窗口大小，所以我没有设法对其进行测试(当我查看页面时，页面上没有足够的空间容纳两列)，但是以上是产品出现在列中的原因，因此如果此列不起作用，您应该能够从中找出解决方案。

关于jquery - css float : left clash/collision, 如何避免？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13801949/

文章推荐： html - css3 圆形聊天气泡，右 'arrow' 和边框

文章推荐： c - libusb_set_interface_alt_setting () 有什么作用？

文章推荐： c++ - 在 Omnetpp 中从消息到数据包的类型转换

文章推荐： c - c中openMP代码的错误答案

perl - 避免 Mojolicious 异步行为？避免 "AnyEvent::CondVar: recursive blocking wait attempted"
我们已经有一个使用 AnyEvent 的库。它在内部使用 AnyEvent，并最终返回一个值(同步 - 不使用回调)。有什么方法可以将这个库与 Mojolicious 一起使用吗？它的作用如下: #
JAXB 避免 JAXBElement
我想从 XSD 文件生成带有 JAXB 的 Java 类。问题是，我总是得到一些像这样的类(删除了命名空间): public static class Action { @X
javascript - 避免/禁用自动跳转到输入字段
我有一个关于 html 输入标签或 primefaces p:input 的问题。为什么光标总是自动跳转到输入字段。我的页面高度很高，因此您需要向下滚动。输入字段位于页面末尾，光标自动跳转(加载)到页
oop - 避免 if 语句
我今天在考虑面向对象设计，我想知道是否应该避免 if 语句。我的想法是，在任何需要 if 语句的情况下，您都可以简单地创建两个实现相同方法的对象。这两个方法实现只是原始 if 语句的两个可能的分支。
java - 避免 NullPointerException
String graphNameUsed = graphName.getName(); if (graphType.equals("All") || graphType.equals(
mysql - 避免/删除表中的重复行
我有一张友谊 table CREATE TABLE IF NOT EXISTS `friendList` ( `id` int(10) NOT NULL, `id_friend` int(10
c - 避免 if in 循环
上下文 Debian 64。Core 2 二人组。摆弄循环。我使用了同一循环的不同变体，但我希望尽可能避免条件分支。但是，即使我认为它也很难被击败。我考虑过 SSE 或位移位，但它仍然需要跳转(
java - 避免 OutOfMemoryError
我最近在 Java 中创建了一个方法来获取字符串的排列，但是当字符串太长时它会抛出这个错误:java.lang.OutOfMemoryError: Java heap space我确信该方法是有效的，
c++ - 避免 while (!is_eof)
我正在使用 (C++) 库，其中需要使用流初始化对象。库提供的示例代码使用此代码: // Declare the input stream HfstInputStream *in = NULL; tr
MySQL 避免 WHERE/AND 中的子查询重复
我有一个 SQL 查询，我在 WHERE 子句中使用子查询。然后我需要再次使用相同的子查询将其与不同的列进行比较。我假设没有办法在子查询之外访问“emp_education_list li”？我猜
android - 避免 NetworkOnMainThreadException
我了解到在 GUI 线程上不允许进行网络操作。对我来说还可以。但是为什么在 Dialog 按钮点击回调上使用这段代码仍然会产生 NetworkOnMainThreadException ？ new T
C++ 避免 if & 硬编码字符串
有没有办法避免在函数重定向中使用 if 和硬编码字符串，想法是接收一个字符串并调用适当的函数，可能使用模板/元编程.. #include #include void account() {
c - 避免 TIME_WAIT
我正在尝试避免客户端出现 TIME_WAIT。我连接然后设置 O_NONBLOCK 和 SO_REUSEADDR。我调用 read 直到它返回 0。当 read 返回 0 时，errno 也为 0。我
c++ - 避免/检测对导出文件的操纵
我正在开发 C++ Qt 应用程序。为了在应用程序或其连接的设备出现故障时帮助用户，程序导出所有内部设置并将它们存储在一个普通文件(目前为 csv)中。然后将此文件发送到公司(例如通过邮件)。为避免
java - 避免 instanceof
我有一组具有公共(public)父类(super class)的 POJO。这些存储在 superclass 类型的二维数组中。现在，我想从数组中获取一个对象并使用子类的方法。这意味着我必须将它们转
java - 避免 "for"语句中的空指针异常
在我的代码中，当 List 为 null 时，我通常使用这种方法来避免 for 语句中的 NullPointerException: if (myList != null && myList.size
c - 避免 TIME_WAIT
我正在尝试避免客户端出现 TIME_WAIT。我连接然后设置 O_NONBLOCK 和 SO_REUSEADDR。我调用 read 直到它返回 0。当 read 返回 0 时，errno 也为 0。我
c - 避免/减轻每次函数调用后返回值检查的痛苦的方法？
在不支持异常的语言和/或库中，许多/几乎所有函数都会返回一个值，指示其操作成功或失败 - 最著名的例子可能是 UN*X 系统调用，例如 open( ) 或 chdir()，或一些 libc 函数。无
R 按值选择，避免 NA
我尝试按值提取行。 col1 df$col1[col1 == "A"] [1] "A" NA 当然我只想要“A”。如何避免 R 选择 NA 值？顺便说一句，我认为这种行为非常危险，因为很多人都会陷入
R 避免 rowwise() 并寻找更快的替代方案
我想将两个向量合并到一个数据集中，并将其与函数 mutate 集成为 5 个新列到现有数据集中。这是我的示例代码: vector1% rowwise()%>% mutate(vector2|>

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - css float : left clash/collision, 如何避免？