在下面,也可以在例如这里,两者的WebKit(Safari 5的,铬10.0.648.205)和Mozilla(FF 4)保持DIV DIV围绕浏览器窗口的可见宽度,而表是一样宽其内容.
我希望DIV能够像TABLE一样扩展,但由于浏览器的行为是一致的,我怀疑这是一个功能而不是bug.
有趣的是,如果DIV设置为float:left,它确实会像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 Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
</table>
</div>
</body>
</html>
mu *_*ort 25
块元素默认采用其父级的宽度,而不是其内容的宽度; 另一方面,高度则相反:块元素默认采用其内容的高度而不是其父级的高度.事情是这样的,因为HTML/CSS是围绕通常从上到下的英文文本布局构建的.
所以,你#container需要宽度,<body>然后<table>内部#container溢出#container.如果你把overflow: hidden在#container你剪辑<table>,overflow-x: auto;上#container会增加一个滚动条.
更新:就浮动元素而言,CSS3规范有这样的说法:
'width'的使用值是计算值,除非是'auto',当使用的值是缩小到适合的宽度时.
默认宽度为auto,因此缩小到适合它:
所述的计算收缩以适应的宽度是类似于使用自动表格布局算法计算一个表格单元格的宽度.粗略地:通过格式化内容来计算首选宽度,而不会破坏除显式换行之外的行,并计算首选最小宽度,例如,通过尝试所有可能的换行符.
你没有可能的换行符,<table>所以浮动#container将占据其<table>孩子的整个宽度.