我在让我的应用程序网页在移动设备上正确显示时遇到了一些问题。我添加了一些用于社交媒体共享的按钮以及在 Google Play 上获取按钮。 Google Play 按钮比其他两个按钮大很多,所以我决定将社交媒体按钮并排放置在它上方。它在 Chrome 和 Firefox 中都运行良好,但是当我尝试在手机上访问它时,Facebook 按钮出现在另一个按钮上方。我试过摆弄 CSS,但无法使其正常工作。现在的层次结构如下所示:
- div“媒体”
- div“分享”
- Facebook 按钮
- 推特按钮
- 播放商店按钮
- div“分享”
CSS 看起来像这样:
#media
{
width:130px;
float:right;
}
#fb
{
position:relative;
float:left;
clear:none;
width:48px;
}
#twitter
{
position:relative;
float:right;
clear:none;
width:56px;
}
下面的两张图片显示了它在两台设备上的样子。
最佳答案
#fb
{
float:left;
width:48px;
}
#twitter
{
float:right;
width:56px;
}
适当的 float ,没有明确的。
编辑:
引用您的网站,这是您应该如何解决它:
#fb
{
display: inline-block;
vertical-align: bottom;
}
不需要 float 这个。如果更适合您,您也可以不使用 vertical-align
。
关于html - 移动设备上的 CSS float 效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23505816/