部分小于内容

Question

我在MVC剃须刀中获得的默认布局页面的部分标记比其内容小。问题是我在里面有一张大桌子，而且它正在用尽部分，而不是部分变得足够宽以适应它。我已经在jsFiddle中重新创建了这个问题。你可以看到蓝色盒子比红色盒子薄很多。蓝色部分是窗口的初始大小，但如果向右滚动，则会看到表格比部分宽。

如何获取要扩大的部分以匹配其内容的大小？

<div class="page">   
    <section id="main" style="background:blue;height:50px"> 
     <table style="width:1000px; overflow:auto;background:red"> 
      <tr><td>lkjlkjlkjlkjjhgjhgjhgjgjhgjhg</td></tr> 

     </table> 
    </section> 
    <footer> 
    </footer> 
</div> 

http://jsfiddle.net/sDG8n/1/

Answer 1

尝试把overflow:auto的部分，而不是在桌子上。

Answer 2

的Spec说你这样做是错误的：

的部分元素代表一个通用的文档或应用程序 节... section元素不是一个通用的容器元素。当需要为造型的目的或为 脚本便利 元素，鼓励作者使用div元素，而不是

换句话说：使用DIV。

Answer 3

浮动部分向左

<section id="main" style="float:left;background:blue;height:50px">