css float：左碰撞/碰撞，如何避免？

我正在嘗試使用Swipe JS 2與jQuery Mobile（仔細考慮筆記here）。css float：左碰撞/碰撞，如何避免？

但是，我發現有一個嘗試使用float：left的衝突問題。我不能干涉Swipe JS 2引用，因此觸摸設備上的輕掃動作將起作用。

這意味着應該顯示在網格中的數據只會顯示在垂直列中。

當檢查應設置顯示網格我看到下面的CSS的檢查： enter image description here

注意，似乎序看滑運動，僅可能對這樣做觸摸設備（手機，平板電腦等）。

當您運行下面的划動動作工作，但數據不顯示在網格（上的jsfiddle碼：上的jsfiddle http://jsfiddle.net/u1sonderzug/YSGY3/，預覽：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>

當您運行以下操作時，滑動不起作用，但數據確實顯示在網格（上的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>

來源

2012-12-10 fakeguybrushthreepwood

更改你的。產品款式的寬度！地址：汽車重要的;像這樣一行： http://jsfiddle.net/b3Jyv/

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

包含每個圖像的DIV是得到它的寬度設置爲100％由.swipe纏繞格組的樣式規則，所以沒有餘地兩種產品彼此相鄰在網格佈局中。

我無法弄清楚如何改變手機上jsFiddle的窗口大小，所以我沒有設法測試它（頁面上沒有足夠的空間來放置兩列）但是以上是產品出現在列中的原因，所以如果這個產品無法正常工作，您應該能夠從中找出解決方案。

來源

2012-12-10 16:18:52 Helen

css float：左碰撞/碰撞，如何避免？

回答

相關問題