Question

在下面的示例中，同样可用的here，WebKit（Safari 5，Chrome 10.0.648.205）和Mozilla（FF 4）都将DIV div保持在浏览器窗口的可见宽度周围，而TABLE为广泛的内容。

我希望DIV能够像TABLE一样扩展，但由于浏览器的行为是一致的，我怀疑这是一个功能而不是错误。

有趣的是，如果DIV设置为float：left，it does grow as wide as the table。

有任何解释吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Wide Table</title>
<style>

#container {
    background-color:blue;
/*    float:left;*/
}

</style>
</head>
<body>
  <div id="container">
    <table >
       <tr id="tr">
         <td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td>
       </tr>
    </table>
  </div>
</body>
</html>

Answer 1

块元素默认采用其父级的宽度，而不是其内容的宽度;另一方面，高度则相反：块元素默认采用其内容的高度而不是父级的高度。事情是这样的，因为HTML / CSS是围绕通常从上到下的英文文本布局构建的。

因此，您的#container的宽度为<body>，然后<table>内的#container溢出#container。如果您将overflow: hidden放在#container上，则会<table>，overflow-x: auto; #container会添加滚动条。

更新：就浮动元素而言，CSS3 spec就是这样说的：

'width'的使用值是计算值，除非是'auto'，当使用的值是缩小到适合宽度时。

默认宽度为自动，因此shrink-to-fit为：

计算缩小到适合宽度类似于使用自动表格布局算法计算表格单元格的宽度。大致：通过格式化内容来计算首选宽度，而不会破坏显式换行符以外的行，并计算首选最小宽度，例如，尝试所有可能的换行符。

<table>中没有可能的换行符，因此浮动的#container将占据其<table>孩子的整个宽度。

Answer 2

我通常设置div的大小，让表调整到div。不确定这一点是否有帮助。

表比包含DIV更宽

2 个答案: