Перейти к публикации

Добавление float делает нерабочим margin.


Рекомендованные сообщения

Здравствуйте!  У меня 2 div блока, идущие друг за другом. Добавление float для любого из слоев, и неважно с каким значением, делает нерабочим margin. Один из объектов словно прилипает к верхней части страницы. Если float убрать, то слои можно свободно двигать.  Как избавится от данного эффекта? И с чем это может быть связанно?  

Заранее спасибо.

Ссылка на сообщение
Поделиться на других сайтах

Это связанно с тем, что Вы используете float. Вполне ожидаемо именно такое поведение браузера.

Выложите наглядный пример на jsfiddle

Ссылка на сообщение
Поделиться на других сайтах

Выровнять как именно?

.fone65 {
  width: 100px;
  padding: 20px;
  margin-bottom: 200px;
  margin-left: 300px;
  margin-right: 200px;
  margin-top: 100px; /* тут */
  display: inline;
  overflow: hidden;
}

У Вас отступ сверху, по горизонтали они не будут выровнены

Ссылка на сообщение
Поделиться на других сайтах

<div class="fone65"> Опустить ниже относительно <div class="fone35">. Для этого обязательно убрать  float? 

А если ниже?

Удаление margin-top, похоже, вообще не сыграло роли Я же говорил margin не работает при float.  

https://jsfiddle.net/ratus/z7b0ev5k/16. Один из блоков прилип к верхнему краю.

Ссылка на сообщение
Поделиться на других сайтах

В случае, когда используется float, margin работает как и прежде. Но, визуально, может казаться что это не так. Дело в том, что в таком случае блоки не имеют аналогичного влияния друг на друга из-за обтекания (float).

Вот приблизительно то, о чём Вы говорите

https://jsfiddle.net/klierik/bw418vqt/2/

Ссылка на сообщение
Поделиться на других сайтах
17.01.2021 в 18:01, klierik сказал:

Выровнять как именно?











.fone65 {
  width: 100px;
  padding: 20px;
  margin-bottom: 200px;
  margin-left: 300px;
  margin-right: 200px;
  margin-top: 100px; /* тут */
  display: inline;
  overflow: hidden;
}

У Вас отступ сверху, по горизонтали они не будут выровнены

С этим я понял, но как теперь быть с display: inline;  fone65 ведет себя как display: block 

https://jsfiddle.net/ratus/1wLc2z7t/2/

Ссылка на сообщение
Поделиться на других сайтах
9 часов назад, ratus сказал:

С этим я понял, но как теперь быть с display: inline;  fone65 ведет себя как display: block 

https://jsfiddle.net/ratus/1wLc2z7t/2/

Для .fone65 Вы используете "float", тем самым свойство "display" игнорируется, элемент становится блочным.

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

  • Статистика пользователей

    47 319
    Всего пользователей
    1 451
    Рекорд онлайна
    Mollykng
    Новый пользователь
    Mollykng
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...