css float：左碰撞/碰撞，怎么避免？
我正在尝试将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>
1 个答案:
答案 0 :(得分：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的窗口大小，所以我没有设法测试它（当我看到它时，页面上没有足够的空间容纳两列），但是以上是产品出现在专栏中的原因，因此如果这个产品不起作用，你应该可以从中找到解决方案。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？