Question

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

Answer 1

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

您应该添加<!DOCTYPE html>（HTML5 doctype）作为第一行（您必须执行此操作才能转义quirks mode并帮助确保不同浏览器之间的一致呈现）。
将float: left添加到div.add-padding。

Live Demo

Answer 2

对于Firebug来说，这是一个完美的问题。右键单击inspect元素，然后查找布局选项卡。您可以将css /样式跟踪到父级。

为什么这个DIV不能扩展到孩子们的宽度

2 个答案: