使2列的div布局表现得像一个2列的表格布局

我有使用下面的HTML代码的div一个基本的2列布局：使2列的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兼容，而不必诉诸表布局？

来源

2015-10-26 Mike

你可以创建一个类似的问题[这里]（http://www.jsfiddle.net）？ – divy3993

#main{ 
    width:80%; 
    float:left; 
    overflow: scroll; 
}

或者，如果你想确保只有一个水平滚动条，作为单独的溢出会为水平和垂直滚动：

overflow-x: scroll;

据我所知，溢出-X是在IE7中支持，所以你应该很好的去与此。

来源

2015-10-26 23:45:04 unpollito

到目前为止，答案对我很有帮助，但现在我觉得我也需要在顶部有一个水平滚动条，因为文档的主要部分位于顶部，并且只是为了使用屏幕底部而痛苦地滚动一个水平滚动条。 – Mike

https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table有几种方法。然而，出于某种原因，第一个选项对我来说不起作用，但是有jQuery插件可以实现这一点。这会起作用吗？ – unpollito

我不想诉诸jquery。我觉得我是0.5％的Web开发人员，他们希望尽可能多地使用浏览器，包括那些无法处理jQuery或甚至运行jsfiddle的旧浏览器。 – Mike

使2列的div布局表现得像一个2列的表格布局

回答

相关问题