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

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

10 голосов
/ 18 ноября 2009

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

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

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

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

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

alt text

Вот мой 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, чтобы серый фон не отображался под моей правой панелью и не создавал неровный уровень внизу?

Ответы [ 5 ]

26 голосов
/ 18 ноября 2009

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

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

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

<br class="clear" />

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

12 голосов
/ 19 ноября 2009 
overflow:hidden; height:100%; <-- for ie

На контейнере это сделаем.

10 голосов
/ 18 ноября 2009 
overflow: auto

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

3 голосов
/ 18 ноября 2009

Существует метод css only для решения проблемы, называемый 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

2 голосов
/ 18 ноября 2009

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

...