CSS漂浮在移动设备上

Question

我在让我的应用网页在移动设备上正确显示时遇到了一些麻烦。我已经为社交媒体分享添加了一些按钮以及在Google Play按钮上获取它。 Google Play按钮比其他两个按钮大得多，所以我决定将社交媒体按钮放在它上面。它在Chrome和Firefox中都运行良好，但当我尝试在手机上访问它时，Facebook按钮显示在另一个上方。我试图摆弄CSS，但我无法正常使用它。现在的层次结构如下所示：

• div＆＃34; media＆＃34;
  • div＆＃34;分享＆＃34;
    • fb button
    • twitter button
  • 播放商店按钮

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;
}

适当的浮动，没有明确的。

修改：

在参考您的网站时，您应该如何解决它：

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

不需要漂浮这个。如果你觉得更适合你，你可以不用vertical-align。

Answer 2

#media上不需要浮动（我可以在示例中看到）。您还可以在position:relative和#fb上删除#twitter，并将其替换为display:inline-block。

最后，将float:left应用于#fb而不是float:middle。

Middle不是float的有效参数。