我正在重新设计当前使用表格进行两列设计的布局，并遇到了一些问题。
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="leftcol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#leftCol
{
margin-right: 10px;
width: 49%;
float: left;
}
#rightCol
{
width: 49%;
float: left;
}
最初我有一个两列的表格width=100%- 这在 Firefox 中完美运行，但在 IE 中，表格溢出了#framediv 容器。我删除了这个表并添加了两个浮动 div，但我仍然遇到使列相等的问题。
我的所有内容都位于 div 内#frame，它具有高度限制以及填充和边距（我使用它在页面边缘周围留下“装订线”）。
我需要两个浮动 DIV 列具有相同的宽度，并且彼此相邻，中间有 10px（左右）的装订线。我尝试同时制作width: 50%，但这会失败，因为它们所在的容器（#frame）的宽度小于整个页面的宽度。 （如果我去掉装订线填充，它在 FF 中有效，但在 IE 中仍然无效。
使每列宽度：49% 有效，但随着浏览器之间大小的变化，并且右列与边缘不对齐，看起来很难看#frame容器。
我之前尝试过这样做，但最终回到表 9（因为它似乎有效），但现在我发现它与 IE 不兼容，我已经工作了几个小时来寻找跨浏览器的 CSS 解决方案。有任何想法吗？
如果您确保每列没有任何边距或填充，则将每列设置为 50% 应该可行。
如果他们需要填充，请放入一个额外的包装 div，它可以有尽可能多的填充/边距。
对于中间的装订线，您可以在左/右侧给这些包装器 div 添加边框，使其看起来像列之间的空间。
发布完整的代码示例（例如在 jsbin.com 上）也将帮助我们更轻松地理解您的问题。 :)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
