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%确定这是你想要的，但试试这个：

You should add <!DOCTYPE html> (the HTML5 doctype) as your very first line (you must do this to escape quirks mode and help to ensure consistent rendering between different browsers).
Add float: left to div.add-padding.

现场演示

Answer 2

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

友情链接