html – TABLE比包含DIV更宽
在下面的示例中,也可以使用
here,WebKit(Safari 5,Chrome 10.0.648.205)和Mozilla(FF 4)都保持DIV div围绕浏览器窗口的可见宽度,而TABLE与其内容一样宽。
我希望DIV可以像TABLE一样广泛,但是由于浏览器的行为是一致的,我怀疑这是一个功能而不是一个bug。 有趣的是,如果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 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> 解决方法
默认情况下,块元素取其父元素的宽度,而不是其内容的宽度;另一方面,高度是相反的工作方式:块元素默认的高度内容,而不是父母的高度。事情以这种方式工作,因为HTML / CSS是围绕英文文本的通常的从上到下的布局构建的。
所以,#container的宽度为< body>然后< table> #container内部的#container外部溢出。如果你把溢出:隐藏在#container上,你将剪辑< table>,overflow-x:auto; #container上会添加一个滚动条。 更新:就浮动元素而言,CSS3 spec有这样的说法:
默认宽度为auto,因此shrink-to-fit是:
您的< table>中没有任何换行符所以浮动的#container将占据其< table>的整个宽度。儿童。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |