CSS всплывает на мобильный

0

У меня возникли проблемы с отображением веб-страницы приложения на мобильных устройствах. Я добавил несколько кнопок для совместного использования социальных сетей, а также кнопку Google Play. Кнопка Google Play была немного больше, чем две другие, поэтому я решил разместить кнопки социальных сетей рядом друг с другом над ней. Он отлично работает как в Chrome, так и в Firefox, но когда я пытаюсь получить доступ к нему на своем телефоне, кнопка Facebook появляется над другой. Я пробовал работать с CSS, но я не могу заставить его работать правильно. Теперь иерархия выглядит так:

  • div "media"
    • div "совместное использование"
      • Кнопка fb
      • кнопка twitter
    • Кнопка Play Store

И CSS выглядит так:

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

Два изображения ниже показывают, как это выглядит на двух устройствах.

Изображение 174551

Изображение 174551

  • 0
    Поплавок средний? Оо
  • 0
    @Colandus Да, чтобы выровнять его с кнопкой твиттера. Это помещает это в середину относительно высоты. Я пробовал как слева, так и снизу. Ничего не работает ..
Показать ещё 1 комментарий
Теги:
mobile

2 ответа

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

Правильное поплавок и отсутствие ясности.

Изменить:

Что касается вашего сайта, вот как вы должны его решить:

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

Не нужно плавать. Вы можете пойти без vertical-align по vertical-align если это вам подходит.

Поделиться
  • 0
    Пробовал это раньше, не работает.
  • 0
    Это правильно сделано, ваша проблема должна быть в другом месте. Попробуйте установить цвет фона на соответствующие элементы и посмотрите, не сталкиваются ли они.
Показать ещё 2 комментария
0

Нет необходимости плавать на #media (из того, что я вижу в примерах). Вы также можете избавиться от position:relative на #fb и #twitter и заменить ее на display:inline-block.

Наконец, примените float:left to #fb вместо float:middle.

Средство не является допустимым аргументом для float.

Поделиться
  • 0
    Пробовал это раньше, не работает. И плавать: средний; определенно что-то делает. По крайней мере, в Chrome происходит то, что он центрирует его вертикально на твиттере (например, выравнивание по img). Поплавок: правильный; в СМИ это касается остальной части страницы.
  • 0
    Нет, НЕТ такого понятия, как середина. Это будет относиться к нему так, как если бы оно вообще не плавало.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню