Nano Hash - криптовалюты, майнинг, программирование

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

Я создаю сайт для школьного конкурса "Математическая эстафета".

У меня есть div «Контейнер» (с белым фоном), затем div с верхней, левой и правой панелью внутри контейнера.

левая и правая панели плавают внутри «Контейнера».

Однако, если вы посмотрите на изображение ниже, вы увидите, что под правой панелью отображается серый фон. Если «Контейнер» действительно содержит верхнюю, левую и правую панели, то это должен быть фон контейнеров, который просвечивает, а нижняя часть должна быть на одном уровне с белым цветом.

Вместо этого кажется, что контейнер не полностью содержит левую и правую панели, и поэтому фактический фон тела просвечивает в нижней части правой панели.

альтернативный текст

Вот мой CSS:

#container {
    margin: 0 auto;
    width: 750px;
    background-color: #ffffff; }

#top-panel {
    background-color: #000000;
    text-align: left;
    width: 100%;
    height: 88px;
    float: left; }

#left-panel {
     clear: left;
     text-align: center;
     background-color: #ffffff;
     border-right: 1px dashed #000000;
     float: left;
     width: 250; }

#right-panel {
    background-color: #ffffff;
    float: left;
    width: 499; }

Как я могу заставить «контейнер» действительно содержать элементы div внутри, чтобы серый фон не отображался под моей правой панелью и не создавал мой неровный уровень внизу?

html layout css
18.11.2009

Ответы:


1

Обе ваши панели являются плавающими и, следовательно, выведены из нормального потока страницы. Чтобы контейнер инкапсулировал их, вы должны очистить поплавок. То, как я это делаю, это сделать класс понятным для br:

.clear {
    clear:both;
    line-height:0;
}

Таким образом, он не занимает места и является клиром. Затем поместите его под два div в контейнере div как таковой.

<br class="clear" />

Должно сработать!

18.11.2009

2 
overflow: auto

должен исправить это.

18.11.2009

3 
overflow:hidden; height:100%; <-- for ie

На контейнере получится.

19.11.2009
  • переполнение: скрыто; это все, что вам нужно, добавление высоты 100% фактически ограничит высоту div, если он содержит контент «выше», чем экран (проверено в IE10) 01.10.2015
  • Почему overflow: hidden исправляет это? 14.09.2016

    • 4

    Существует единственный метод css для решения проблемы, который называется clearfix. Лучше всего использовать его как класс, который вы применяете выборочно к нужным вам элементам div:

    .clearfix {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

    Для вашей конкретной разметки подойдет следующий css:

    #left-panel:after,
#right-panel:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

    Ссылка http://www.positioniseverything.net/easyclearing.html

    18.11.2009
  • :after не поддерживается всеми браузерами, наиболее ярким примером является IE6, поэтому он вообще не будет работать. 18.11.2009

    • 5

    Ничто не принуждает к сдерживанию, вы можете указать очистку последнего элемента, чтобы принудительно заключить сдерживание. Обычный хак заключается в добавлении дополнительного блокирующего элемента с помощью clear:both, например: <div style="clear:both"></div>

    18.11.2009
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..