Почему этот 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>

источник

2011-02-09 Andrew Burns

Возможный дубликат: http://stackoverflow.com/questions/1504863/div-does-not-expand-to-maximum-width –

@Alex: Не дуп (из этого вопроса, по крайней мере) мой div действительно расширяется до ширины окна просмотра, а не только с содержащими элементами. –

Не 100% уверен, что это то, что вы хотите, но попробуйте это:

Вы должны добавить <!DOCTYPE html> (HTML5, DOCTYPE) в качестве самой первой строке (вы должны сделать это, чтобы избежать quirks mode и помогают обеспечить согласованный рендеринг между разными браузерами).
Добавить float: left в div.add-padding.

Live Demo

источник

2011-02-09 21:45:09 thirtydot

Это исправляет проблему как в Chrome (поэтому я предполагаю, что все браузеры, основанные на вебкитах), так и Firefox, которые являются единственными, кого я забочу об этом приложении. Можете ли вы объяснить, почему плавающие левые исправления? Как вы отметили в другом комментарии, это не совсем интуитивно понятно. –

'float: left' frees' div.add-padding' из-за ограничения 'width' на' width' элемента 'body' (который в этом случае совпадает с шириной окна просмотра). Другой способ исправить это было бы добавить «position: absolute». – thirtydot

Большое спасибо за этот ответ. Я ударил головой об этой же проблеме в течение большей части часа. Хотел бы я сначала поинтересовался. – StudyOfCrying

Это идеальная задача для Firebug. Щелкните правой кнопкой мыши элемент проверки, затем найдите вкладку макета. Вы можете проследить css/styles родителям.

источник

2011-02-09 22:04:42 zdux

В этом случае я не думаю, что это особенно помогает. Как это поможет исследователю подумать о том, чтобы применить что-то вроде 'float: left'? – thirtydot

@thirtydot Согласен, я действительно использовал firebug, вот как я нашел проблему в первую очередь, мой настоящий сайт не черный на синем на красном, как моя демонстрация :) Очевидно, я не думал добавлять 'float: левый', или я бы не поставил вопрос. –

Почему этот DIV не расширяется до ширины детей

ответ

Смежные вопросы