html - 移动设备上的 CSS float 效果

Question

我在让我的应用程序网页在移动设备上正确显示时遇到了一些问题。我添加了一些用于社交媒体共享的按钮以及在 Google Play 上获取按钮。 Google Play 按钮比其他两个按钮大很多，所以我决定将社交媒体按钮并排放置在它上方。它在 Chrome 和 Firefox 中都运行良好，但是当我尝试在手机上访问它时，Facebook 按钮出现在另一个按钮上方。我试过摆弄 CSS，但无法使其正常工作。现在的层次结构如下所示:

• div“媒体”
  • div“分享”
    • Facebook 按钮
    • 推特按钮
  • 播放商店按钮

CSS 看起来像这样:

#media 
{
    width:130px;
    float:right;
}
#fb
{
    position:relative;
    float:left;
    clear:none;
    width:48px;
}
#twitter
{
    position:relative;
    float:right;
    clear:none;
    width:56px;
}

下面的两张图片显示了它在两台设备上的样子。

Answer 1

#fb
{
    float:left;
    width:48px;
}
#twitter
{
    float:right;
    width:56px;
}

适当的 float ，没有明确的。

编辑:

引用您的网站，这是您应该如何解决它:

#fb
{
    display: inline-block;
    vertical-align: bottom;
}

不需要 float 这个。如果更适合您，您也可以不使用 vertical-align。