这个DIV为什么不扩展到儿童的宽度

问题描述：

我有一个问题，并想知道为什么我的包含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>

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

@Alex：不是一个重复（至少是那个问题）我的div事实上展开到视口的宽度，而不是包含的元素。 – 2011-02-09 21:07:32

答

不是100％肯定这是你想要的，但试试这个：

您应该添加<!DOCTYPE html>（HTML5的DOCTYPE）作为第一行（你必须这样做是为了逃避quirks mode和有助于确保不同浏览器之间的一致呈现）。
将float: left增加到div.add-padding。

Live Demo

这解决了Chrome中的问题（所以我假设所有基于webkit的浏览器）和Firefox，这是我关心这个应用程序的唯一两个问题。你能解释为什么浮动左修正它吗？正如你在另一评论中指出的那样，它并不直观。 – 2011-02-10 15:16:59

答

这是Firebug的一个完美的问题。右键单击检查元素，然后查找布局选项卡。你可以跟踪父母的CSS /样式。

这个DIV为什么不扩展到儿童的宽度

相关推荐