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

Question

一整天我都在为这个问题烦恼，所以欢迎任何帮助/建议!

基本上，我的新元素使用检测移动浏览器脚本来检查用户是否在移动设备上，如果是，则禁用普通样式表并启用移动样式表。

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

这只发生在移动设备上，所以你可以通过转到 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;
}

如有任何帮助，我们将不胜感激!

谢谢，

迈克尔

Answer 1

好吧，我实际上是在“灯泡时刻”之后设法解决这个问题的。出于某种原因，移动设备(我在 android 和 ios 上测试过)似乎在更改幻灯片时呈现包含元素的宽度时出现问题，从而迫使正确的 float 内容向下移动。

修复，简单的改变

#PSM, #banger, #hot, #eclectic, #definitive, #guest {
宽度:60em；
}

到

#PSM, #banger, #hot, #eclectic, #definitive, #guest {
最大宽度:60em；
}

到此为止，希望对大家有所帮助!