очистка поплавков CSS не работает, как ожидалось - PullRequest
Новая
       13

очистка поплавков CSS не работает, как ожидалось

0 голосов
/ 18 января 2012

Я прочитал несколько статей по этому поводу, например http://css -tricks.com / all-about-float / или http://www.sitepoint.com/simple-clearing-of-floats/, и все предлагают одни и те же приемы, но они не работаютдля меня.HTML: 

<html>
    <head>
    <body>
        <div id="wrapper">
            <div id="head">
                <div id="columns">              
                    <div id="result_wrapper" class="dataTables_wrapper">
                        <div id="result_length" class="dataTables_length">
                        <div class="dataTables_scroll">
                            <div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0pt none; width: 100%;">
                                <div class="dataTables_scrollHeadInner" style="width: 1017px;">
                            </div>
                            <div class="dataTables_scrollBody" style="overflow: auto; height: 570px; width: 100%;">
                                <table id="result" style="margin-left: 0pt; width: 100%;">
                            </div>
                    </div>
                    <div id="result_info" class="dataTables_info">Showing 1 to 2 of 451 entries</div>
                    <div id="result_paginate" class="dataTables_paginate paging_full_numbers">
                </div>
            </div>
            <div id="foot">
        </div>
    </body>
</html>

У моего div нижнего колонтитула есть поле margin-top, которое игнорируется, или поле рассчитывается из неправильного элемента.Нижний колонтитул появляется внутри контейнера, а не под ним.Проблема идентична в IE8 и FF 9.0.1

Есть идеи?

РЕДАКТИРОВАТЬ:

CSS: 

div#head {
    position: absolute;
    width:1000px;
    height:50px;
    left:0px;
    top: 0px;
}
div#foot {    
    position: relative;
    width: 1000px;
    margin-top: 30px;
}

div#columns {
    position: relative;
    width: 1000px;
    top: 50px;
    overflow: auto;
}

div#wrapper {

    position:relative;

    margin-left:auto;

    margin-right:auto;

    top: 20px;

    width:1000px;

}

Примечание: я используюплагин datatables.часть html генерируется этим плагином (включая встроенные стили. CSS для этого слишком длинный, чтобы его можно было публиковать здесь.

Некоторые таблицы данных css: 

.dataTables_info {
    width: 60%;
    float: left;
}

.dataTables_paginate {
    width: 44px;
    * width: 50px;
    float: right;
    text-align: right;
}

EDIT 2:

Скриншот проблемы после применения исправления Скотта (что тоже не помогает)

div id=

div id=

Firebug HTML Panel

Обратите внимание, что разметка в столбцах создается в функции JQuerys $ (document) .ready. Может быть, это вызывает проблему?

EDIT 3:

Однако я пробовал jsFiddle, пока clear floatисправления работают там, они нарушают отображение таблицы данных.

трюк очистки с плавающей точкой из примененного Скотта: http://jsfiddle.net/yApAh/6/

нижний колонтитул верен, но остальная часть таблицы неверна

без ясного трюка: http://jsfiddle.net/yApAh/7/

здесь нижний колонтитул неправильный, но данные отображаются по желанию.

Ответы [ 3 ]

0 голосов
/ 18 января 2012

Какие биты плавают?Если это div внутри #columns, вам нужно использовать overflow:hidden, а не overflow:auto

0 голосов
/ 19 января 2012

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

#columns:before, 
#columns:after { 
   content: ""; 
   display: table; 
}
#columns:after { 
   clear: both; 
}
#columns { 
   *zoom: 1; 
}

Если хотите, можете проверить мои CSS рамки .

0 голосов
/ 18 января 2012

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

 <div style="clear:both; height: 1px;"></div>

Тогда поле будет работать в нижнем колонтитуле.

...