仅 DIV 的两列 CSS 布局答案

【问题标题】：DIV-only two column CSS layout仅 DIV 的两列 CSS 布局
【发布时间】：2013-04-29 21:22:53
【问题描述】：

我正在重新设计当前使用表格进行两列设计的布局，但遇到了一些问题。

<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 中，表格溢出了 #frame div 容器。我删除了这个表并添加了两个浮动 div，但我仍然无法让列相等。

我的所有内容都位于 div #frame 内，它具有高度限制以及填充和边距（我使用它在页面边缘留下一个“排水沟”）。

我需要两个浮动的 DIV 列具有相同的宽度，并且彼此相邻，中间有一个 10 像素（ish）的排水沟。我尝试同时制作width: 50%，但这失败了，因为它们所在的容器（#frame）在宽度上小于整个页面的宽度。（如果我去掉了装订线填充，它在 FF 中有效，但在 IE 中仍然无效。

使每列宽度：49% 有效，但随着浏览器之间大小的变化以及右列与#frame 容器的边缘不对齐，看起来很难看。

我之前尝试过这样做，但最终回到表 9，因为它似乎可以工作），但现在我发现它与 IE 不兼容，我已经工作了几个小时来寻找跨浏览器的 css 解决方案。有什么想法吗？

【问题讨论】：

你知道框架的宽度吗？

标签： html css

【解决方案1】：

如果您确保它们没有任何边距或填充，将每列设置为 50% 应该可以工作。

如果他们需要填充，放入一个额外的包装 div，它可以有尽可能多的填充/边距。

对于中间的间距，您可以在这些包装 div 的左侧/右侧设置边框，使其看起来像列之间的空间。

发布完整的代码示例（例如在 jsbin.com 上）也有助于我们更轻松地了解您的问题。 :)

【讨论】：

【解决方案2】：

我认为您可能会受益于像 960gs 或 blueprint css 这样的 css 框架，它允许绝对的网格放置，并且开箱即用地兼容跨浏览器。

http://www.blueprintcss.org/

http://960.gs/

【讨论】：

【解决方案3】：

如果你知道边框的宽度，可以do this

#frame {
    background-color: green;
    width: 500px;
    overflow: auto;
}

#leftCol
{
    width: 245px;
    float: left;
    background-color: red;
}

#rightCol
{
    width: 245px;
    float: right;
    background-color: blue;
}

<div id="frame">

    <div id="leftCol">
    <div id="1">blah</div>
    </div>

    <div id="rightCol">
    <div id="2">blah</div>
    <div id="3">blah</div>
    </div>

</div>

否则，添加一个额外的 div，然后do this

<div id="frame">

    <div id="leftCol">
    <div id="hack">
        <div id="1">blah</div>
    </div>
    </div>

    <div id="rightCol">
    <div id="2">blah</div>
    <div id="3">blah</div>
    </div>

</div>

#frame {
    background-color: green;
    width: 500px;
    overflow: auto;
}

#leftCol
{
    width: 50%;
    float: left;
}

#hack {
    margin-right: 10px;
    background-color: red;
}

#rightCol
{
    width: 50%;
    float: right;
    background-color: blue;
}

【讨论】：

我不知道#frame的宽度，它根据屏幕尺寸而变化。我尝试了您的第二个解决方案，但带有边距的 hack 仍然导致浮动堆叠在一起。
嗯？你点击链接了吗？它们不会堆叠在 FF 或 IE 中。确定你实施对了吗？

【解决方案4】：

好的，给你。这就是它可以实现的方式。

CSS

#leftCol, #rightCol{
    width: 48%;
    float: left;
    background: red;
    box-sizing: border-box;
}

#leftCol{
    margin-right: 1%; 
}

#rightCol{ 
    margin-left: 1%; 
}

HTML

<div id="frame">

    <div id="leftcol">
      <div id="1">blah</div>
     </div>

     <div id="rightCol">
      <div id="2">blah</div>
      <div id="3">blah</div>
     </div>

</div>

如果您需要这里是 box-sizing 的供应商前缀。

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;

请注意，您的 HTML 中有错字，两个 div 都称为 #leftCol。没有#rightCol。

【讨论】：