Почему этот плавающий div сбрасывается с поля его родного брата?

0

У меня есть контейнер div с двумя дочерними div.

Кулачный ребенок перемещается вправо. У второго ребенка верхний край.

По какой-то причине маржа второго ребенка вытаскивает родительский контейнер, в результате чего сбрасываемый элемент также сбрасывается.

Есть ли способ сделать эту работу, не вложив второго ребенка в другой div, чтобы предотвратить срыв?

Элементы являются динамическими, поэтому я не могу просто добавить отрицательный запас на боковую панель, чтобы отрицать границу другого ребенка.

HTML

<div id="content">
    <div id="sidebar">sidebar</div>
    <div id="messages">
        a message
    </div>
</div>

CSS

body {
    background-color : red;
}

#content {
    background-color: blue;
}

#sidebar {
    background-color: yellow;
    float: right;
}

#messages {
    background-color: green;
    margin-top : 20px;
}

скрипка

Теги:

2 ответа

1
Лучший ответ

Дайте overflow:hidden родительскому div, то есть .content

Поделиться
Показать ещё 3 комментария
1

Добавьте невидимый символ .content в .content

<div id="content">
    &nbsp; <!-- Add this -->
    <div id="sidebar">sidebar</div>
    <div id="messages">
        a message
    </div>
</div>

Это то, что вы хотите? Изображение 174551

Почему это работает?

Проверьте ссылку здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Родительский и первый/последний ребенок Если нет границы, отступов, встроенного содержимого или разрешения, чтобы отделить верхний край поля с краем верхнего его первого дочернего блока или без границы, отступы, встроенный контент, высота, min-height или max-height, чтобы отделить крайнее основание блока с краем нижней части его последнего ребенка, тогда эти поля рушится. Разрушенный край заканчивается вне родителя.

Я использовал "встроенный контент", чтобы "исправить" проблему, на самом деле вы можете исправить ее, используя один из следующих способов:

  • Добавить border: 1px solid для .content.
  • Добавьте padding: 1px к .content.
  • Добавьте встроенный контент (например, пробельный символ)
  • Используйте clear:both div
Поделиться
  • 0
    Это то, что я хочу. Но это кажется немного хакерским. Почему это работает?
  • 0
    @SystemicPlural проверьте мой обновленный ответ.

Ещё вопросы

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