Jump to content
  • 0

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


Question

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

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

Link to post
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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

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

Link to post
Share on other sites
  • 0

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

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

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

Link to post
Share on other sites
  • 0

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

А если ниже?

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

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

Link to post
Share on other sites
  • 0

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

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

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

Link to post
Share on other sites
  • 0
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/

Link to post
Share on other sites
  • 0
9 часов назад, ratus сказал:

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

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Комментарии

    • Весеннее обострение! Здравствуйте! Весна добралась уже до каждого уголка, где Intersect.Host предоставляет свои услуги. В каждой стране (а у Intersect.Host сервера располагаются в 7 странах) люди уже радуются теплому весеннему солнцу, последний снег уже сходит и природа просыпается. Мы предлагаем скидку равноценно средней температуре за неделю в каждом городе, где расположены наши серверы. Таким образом: VPS/VDS Россия -8% на все сервера, на продление и покупку. VPS/VDS Молдавия -12% на все сервера, на продление и покупку. VPS/VDS Нидерланды -7% на все сервера, на продление и покупку. VPS/VDS Латвия -6% на все сервера, на продление и покупку. VPS/VDS Украина -11% на все сервера, на продление и покупку. VPS/VDS Гонконг -21% на все сервера, на продление и покупку. VPS/VDS США -13% на все сервера, на продление и покупку. Используйте промокод "LoveSpring" и пользуйтесь скидкой на сервера. Акция актуальна до 11.04.2021  Наши контакты: Сайт - https://intersect.host/ Телеграм - @IntersectHost Тикет - https://bill.intersect.host/billmgr  
    • Соскучились ? :) Хотим поделиться с вами радостными новостями и предложить вам интересный купон :) В ближайшее время, по вашим просьбам, мы добавим услугу Мобильные прокси, сейчас мы ищем 50 тестировщиков, которые после тестирования, получат 50% скидку на услугу Мобильные прокси. А пока, можете воспользоваться вкуснейшим промо-кодом на 20% для всех текущих услуг Промо-код WOW действует до 12 апреля, успей приобрести наши услуги намного дешевле. Наш сайт https://proxywhite.com
    • Https://dropmefiles.com/sYyOA Вот ссылка на проект. Создайте папку "img" и в ней папку "jac" и закиньте туда фотки, файл-обменик их зачем то удалил. В общем по фотке видно всё нормально, но я смог сделать, чтобы либо работала "система следующей фотки", либо "система по нажатию снизу фоток". Совместно оно не работает. Помогите пожалуйста, замучился уже 5 день мучаюсь. Проблема чисто в скрипте JS. Желательно сделать рабочую систему на 1-ой JS, 2-я жс немного как по мне не удобна.
    • Перенос коробки Битрикс24 в облако для клиента Друзья, работаете с коробочной версией Битрикс24 или планируете внедрить её в работу? Разместите CRM в надёжных облаках от Tucha — рекомендованного хостинг-партнёра Битрикс24. Наши виртуальные серверы имеют специальное окружение Bitrix Environment для продуктивной работы коробки и соответствуют всем требованиям её разработчика. На примере реального проекта рассказываем, как происходит процесс переноса CRM на сервер и сколько стоит такое решение: https://tucha.ua/ru/solutions/perenos-korobki-bitriks24-v-oblako-dlya-klienta-realnyy-primer. А для лёгкого старта работы в облаке с популярной редакцией «Корпоративный портал 50» дарим специальные условия! При заказе акционных конфигураций VPS до 03.05.2021 включительно вы получите: 1.    Скидку 10 евро* на оплату первого счёта. 2.    Услугу по подключению локального принтера к виртуальному серверу от службы технической поддержки Tucha в подарок. Чтобы воспользоваться предложением, звоните +380 44 583-5-583 или пишите нам по адресу sales@tucha.ua и укажите промокод TD-232-0. Не упустите возможность перенести коробку Битрикс24 в облака с приятными бонусами! *В гривнах на первое число текущего месяца.
    • Друзья у нас радостная новость Для услуги VPN https://altvpn.com/ru/vpn/ Мы разработали приложения для Windows, Android, Mac OS, IOS (IOS пока не пропустили в App Store) Приложения находится в стадии тестирования, поэтому на сайте мы их еще не опубликовали, но уже можно его попробовать, написав нам в службу поддержки https://altvpn.com/ru/support/ или связаться с консультантом (поддержка 24/7) Но это еще не все, многие просят чтобы мы добавили услугу Мобильные прокси, поэтому по многочисленным просьбам мы уже работаем над этим и ищем тестировщиков, оставьте свою почту нашему оператору или свяжитесь с нами https://altvpn.com/ru/support/ при появлении услуги на сайте, вы автоматически получите промо-код на 40% для покупки. Для всех верных и постоянных клиентов у нас скидки в размере 25% на все услуги, кроме пакетных прокси-серверов. Промо-код MOBILE предоставит вам скидку в размере 25% осталось только ввести его и купить. Акция действует до 15 апреля, успейте купить по вкусным ценам.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.