2011-02-09 95 views
2

我有一個問題,並想知道爲什麼我的包含DIV不擴大到大表的寬度?這個DIV爲什麼不擴展到兒童的寬度

<html> 
    <head> 
     <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" type="text/css" media="screen, projection" /> 
     <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/print.css" type="text/css" media="print" /> 
     <!--[if lt IE 8]><link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]--> 
     <style type="text/css"> 
     div.add-padding { 
      padding: 15px; 
      background-color: red; 
     } 
     table { 
      background-color: blue; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="add-padding"> 
     <table> 
      <thead> 
       <tr><td>FOO</td></tr> 
      </thead> 
      <tbody> 
       <tr><td>BAR</td></tr> 
      </tbody> 
     </table> 
     <table> 
      <thead> 
       <tr> 
        <td>SEQ</td> 
        <td>ID</td> 
        <td>ParentID</td> 
        <td>Case Category</td> 
        <td>Case #</td> 
        <td>Case ID</td> 
        <td>Account Code</td> 
        <td>Account Code ID</td> 
        <td>Trans Date</td> 
        <td>Person ID</td> 
        <td>FullName</td> 
        <td>Suffix</td> 
        <td>PayeeID</td> 
        <td>OperatorID</td> 
        <td>Notes</td> 
        <td>CheckID</td> 
        <td>ReceiptID</td> 
        <td>Void</td> 
        <td>TransCategoryID</td> 
        <td>CaseFull</td> 
        <td>TransTypeID</td> 
        <td>Xfer To</td> 
        <td>Ref #</td> 
        <td>View Amount</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
        <td>foo_bar</td> 
       </tr> 
      </tbody> 
     </table> 
     </div> 
    </body> 
</html> 
+1

可能的重複:http://stackoverflow.com/questions/1504863/div-does-not-expand-to-maximum-width – 2011-02-09 20:59:58

+0

@Alex:不是一個重複(至少是那個問題)我的div事實上展開到視口的寬度,而不是包含的元素。 – 2011-02-09 21:07:32

回答

4

不是100%肯定這是你想要的,但試試這個:

  • 您應該添加<!DOCTYPE html>(HTML5的DOCTYPE)作爲第一行(你必須這樣做是爲了逃避quirks mode和有助於確保不同瀏覽器之間的一致呈現)。
  • float: left增加到div.add-padding

Live Demo

+0

這解決了Chrome中的問題(所以我假設所有基於webkit的瀏覽器)和Firefox,這是我關心這個應用程序的唯一兩個問題。你能解釋爲什麼浮動左修正它嗎?正如你在另一評論中指出的那樣,它並不直觀。 – 2011-02-10 15:16:59

1

這是Firebug的一個完美的問題。右鍵單擊檢查元素,然後查找佈局選項卡。你可以跟蹤父母的CSS /樣式。