Нужна помощь с плавающей точкой CSS

Question

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

В html-файле маленькие изображения находятся в глобальном контейнере. Помещен нижний колонтитулпрямо под глобальным контейнером. Но теперь нижний колонтитул находится наверху.

Это мои css-

CSS изображений-

style="margin-top: 25px; margin-right: 48px; float: right;"<br>
style="margin-top: 25px; margin-right: 48px; float: left;"

#footer_container{
    width: 900px;
    height: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    position: absolute;
    border: solid;    
}     



#global_body_container{
    width: 746px;
    position: absolute;
    padding-bottom: 10px;
    border-color: #c6c8cc;
    border-style:dashed;
    clear: both;


}

Спасибо.

Answer 1

У вас есть position: absolute; на вашем #footer_container. Удалите это и затем добавьте очистку br под нижний колонтитул, например,

<div id="global_body_container">
    <img>
    <img>
    etc...

    <br style="clear:both;" />

    <div id="footer_container">
         whatever content...
    </div>

</div>


#footer_container{
    width: 900px;
    height: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    position: absolute;  //REMOVE THIS
    border: solid;    
}

Кроме того, вы можете рассмотреть возможность добавления в правило border дополнительных параметров, таких как толщина и цвет, например, border:1px solid black;

Answer 2

Место на контейнере с плавающими элементами overflow: hidden.

#global_body_container {
    overflow: hidden;
}

Answer 3

Поскольку все ваши элементы в global_body_container являются float, поэтому он не может обернуть эти изображения визуально.

Простое решение - добавить заглушку в конце global_body_container и дать ей очистить элементы float.

<div id="global_body_container">
    <img class="left">
    <img class="right">

    <div style="clear:both"></div>
</div>

Шинкоу упомянул об очищающем трюке.Вы также можете обратиться к clearfix mixin в compass .Израсходованный CSS выглядит следующим образом:

.clearfix {
    overflow: hidden;
    *zoom: 1;
}

Также обратитесь к обсуждению в Какие методы «clearfix» можно использовать?

Answer 4

Создать новый «контейнер содержимого». Поместите все ваши плавающие изображения. Затем поместите новый контейнер прямо перед вашим footer_container.