清除CSS浮動不按預期工作

-1

我已閱讀了幾篇文章，如http://css-tricks.com/all-about-floats/或http://www.sitepoint.com/simple-clearing-of-floats/和所有建議相同的技巧，但他們不適合我。 HTML：清除CSS浮動不按預期工作

<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有一個邊距被忽略或保證金從錯誤的元素來計算。頁腳出現在容器div中，而不是它下面。問題是在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; 

}

注：我使用的DataTable的插件。由插件（包括內聯樣式生成的HTML的一部分對這些源代碼太長，這裏完全發佈

一些數據表CSS：。

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

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

編輯2：

問題的屏幕截圖應用斯科茨修復（這也沒有幫助）

div id="columns"

後

Firebug HTML Panel

注意，在列標記在JQuerys $（document）.ready函數創建。也許這會導致問題？

編輯3：

我試過的jsfiddle但同時浮法修復工作，在那裏，他們破壞的數據表的顯示。斯科特

浮法招應用： http://jsfiddle.net/yApAh/6/

頁腳是正確的，但該表的其餘部分是錯誤的

沒有明確的絕招： http://jsfiddle.net/yApAh/7/

這裏頁腳是錯誤的，但數據表顯示如預期的。

來源

2012-01-18 beginner_

你的CSS在哪裏？ – BoltClock 2012-01-18 13:11:15

.wrapper {margin：0 auto}？ – 2012-01-18 13:13:37

請提供你的bug的jsfiddle。 – c69 2012-01-18 13:16:49

我建議可以發佈您的CSS代碼到這個acompany，爲您的頁腳設置清除頁腳上述其它分割所有彩車

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

那麼保證金將在頁腳工作。

來源

2012-01-18 13:16:57 Neo

same here：不工作 – 2012-01-18 13:55:20

你需要發佈你的CSS，否則它不會工作，不知道在哪裏浮動是不可能知道在哪裏把頁腳和div – Neo 2012-01-18 13:57:23

哪些位浮動？如果是#columns內div的，你需要使用overflow:hidden不overflow:auto

來源

2012-01-18 13:30:34 Deadlykipper

已經嘗試btoh具有相同的效果：不起作用 – 2012-01-18 13:55:06

始終使用「The Easy Clearing Method」，因爲它適用於所有情況，並在所有模式下所有的瀏覽器。

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

如果你喜歡，你可以看看我的css framework。

來源

2012-01-19 00:32:23

也沒有幫助。查看屏幕截圖。列中的標記是在JQuery $（document）.ready中創建的 – 2012-01-19 06:12:48

清除CSS浮動不按預期工作

回答

相關問題