我正在尝试将Swipe JS 2与jQuery Mobile一起使用（请仔细考虑注释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>
运行以下命令时，滑动动作不起作用，但是数据确实显示在网格中（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 :左碰撞/碰撞，如何避免？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13801949/