我使用以下html代码对div进行了基本的2列布局：
<div ID="main">
<!-- body content -->
</div>
<div ID="sidepanel">
<!-- side content -->
</div>
以及以下CSS代码：
#main{
width:80%;
float:left;
overflow:hidden
}
#sidepanel{
width:18%;
float:right;
overflow:hidden
}
尽管这些列在大多数情况下都做得不错，但我有一个问题。如果我的主要内容需要超过80％的屏幕宽度才能正确显示，则将剩余的宽度剪裁掉。如果我删除了这两个overflow:hidden项目，则侧面板的内容会与主体内容重叠。在两种情况下，我都能正确看到所有内容的唯一方法是使用Web浏览器缩小功能或提高屏幕分辨率。
有了表格，我可以简单地在没有CSS的情况下使用此设置：
<table>
<tr>
<td>
<!-- body content -->
</td>
<td>
<!-- side content -->
</td>
</tr>
</table>
一切正常。
总的来说，如果主体内容对于屏幕而言太宽，我希望使用水平滚动条而不是剪切。
任何人都知道如何解决此问题，同时仍使其与IE7兼容，而不必求助于表格进行布局？
#main{
width:80%;
float:left;
overflow: scroll;
}
或者，如果您想确保只有一个水平滚动条，那么水平和垂直滚动都单独使用溢出来完成：
overflow-x: scroll;
据我所知，IE7支持overflow-x，因此您应该很好地配合使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句