javascript - 在移动设备上移动元素

我整整一天都在梳头，所以欢迎任何帮助/建议！

基本上，我的新项目使用“检测移动浏览器”脚本来检查用户是否在移动设备上，如果是，请禁用常规样式表并启用移动样式表。

我已经设法解决了大多数问题，但是由于某些原因，我对其中一个部分的内容滑块有问题，它在每个幻灯片中都有两个内联元素，一个向左浮动（文本），一个向右浮动（图片）。由于某些原因，单击第二张幻灯片时，图像向下移动到文本下方。通常，如果没有空间，则会发生这种情况，但事实并非如此，因为这两个元素都有足够的空间。

这仅在移动设备上发生，因此您实际上可以通过转到http://beta.residencyradio.com并转到功能部分来了解我的意思，我正在使用的当前版本适用于平板电脑，因此最好在此处查看。

我的想法是，这一定与移动样式表中的此代码段中的某些内容有关（以下），但我不太确定该做什么。

#feat {
width: 60em;
margin-top: 3.125em;
display: inline-block;
}

.feat_container {
width: 23.4375em;
display: inline-block;
margin-top: 9.0625em;
margin-bottom: 9.0625em;
float: left;
}

.feat_container p {
font-size: 1.125em;
line-height: 1.2em;
margin-bottom: 0;
}

.feat_logo {
width: 23.4375em;
display: inline-block;
float: right;
margin: 0;
}

#feat_nav {
float: left;
display: inline-block;
}

#feat_nav a {
background: url('../images/dot.png') no-repeat;
font-size: 16px;
padding-right: 9px;
text-decoration: none;
margin-right: 5px;
color: rgba(1, 1, 1, 0);
}

#feat_nav a.activeSlide {
background: url('../images/dot_active.png') no-repeat;
}

#PSM .feat_container {
margin-top: 8.375em;
margin-bottom: 8.375em;
}

#PSM, #banger, #hot, #eclectic, #definitive, #guest {
width: 60em;
}

#guest .feat_container {
margin-top: 7.6875em;
margin-bottom: 7.6875em;
}

任何帮助将不胜感激！

谢谢，

麦可

最佳答案

好的，我实际上是在“灯泡瞬间”之后才解决的。由于某些原因，移动设备（我已经在android和ios上进行了测试）似乎在更改幻灯片时呈现包含元素的宽度时出现问题，从而迫使正确浮动的内容向下移动。

解决方法，只需更改

#PSM, #banger, #hot, #eclectic, #definitive, #guest {width: 60em;}

至

#PSM, #banger, #hot, #eclectic, #definitive, #guest {max-width: 60em;}

这样可以解决问题，希望对您有所帮助！

关于javascript - 在移动设备上移动元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10238837/