jquery - css float: 左衝突/衝突、回避方法は?

Question

jQuery Mobile でSwipe JS 2を使用しようとしています(注意事項hereを慎重に考慮してください)。

ただし、 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>

score 2 · Accepted Answer

.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% に設定されているため、グリッドレイアウトで 2 つの製品が隣り合う余地がありません。

携帯電話で jsFiddle のウィンドウサイズを変更する方法がわからないので、テストできませんでした (ページを見てみると、ページに 2 つの列を表示する十分なスペースがありません)。製品が列に表示される理由。これがうまくいかない場合は、そこから解決策を見つけられるはずです。

jquery - css float: 左衝突/衝突、回避方法は?

1 に答える 1

Related

Reference