CSS中的双列布局与IE中的动态高度答案

【问题标题】：Dual Column Layout in CSS with dynamic height in IECSS中的双列布局与IE中的动态高度
【发布时间】：2010-01-19 22:57:15
【问题描述】：

我有一个使用 CSS 的双列布局：

<div id="nav"></div>
<div id="left_column"></div>
<div id="right_column"></div>
<div id="footer"></div>

#left_column{
    float: left;
    width: 463px;
    display: inline-block;
    margin-left: 12px;    
}

#right_column{
    float: right;
    width: 463px; 
    display: inline-block; 
    margin-right: 12px;
}

#footer{ 
  clear:both;
  text-align: center;
  padding: 40px;
}

这在 Firefox 中运行良好，但在 IE 中会产生问题。主要问题是这两列的内容是动态的，并且永远不会达到相同的高度，有时任何一列的高度都比另一列大。在 IE 中，左右列与底部对齐，这在较短的列和导航之间创建了可变数量的空间。我想要的是让列与顶部/导航对齐，然后当在 left_column 的顶部使用 ajax 插入元素时，它只是将该列中的内容向下推，并且两列在顶部保持对齐。我希望这是有道理的，任何帮助表示赞赏。

...

以 igoogle 布局为例，我添加了以下 css，它似乎可以正常工作：

<div id="outside">
    <div id="left_column"></div>
    <div id="right_column"></div>
</div>
<div id="footer"></div>

#outside{
  display: block;
  float: none;
  margin: 0 0 1em;
  overflow: hidden;
  position: static;
  width: auto;
}

.column {
  display: block;
  width: 40%;
  float: left;
  margin-left: 0px;
}

我还没有完全实现它，但这似乎是将列与顶部对齐，而不考虑高度，并以顶部作为参考点展开/收缩。

【问题讨论】：

您有在线示例说明当前正在发生的事情吗？
在什么版本的 IE 中？它似乎在我的 IE8 上运行良好。值得指出的是 inline-block 不是有效的 CSS，这可能会导致问题。
inline-block 是有效的 CSS2。但在 IE6/7 中并没有得到很好的支持。
它是有效的 CSS2.1，这是一个候选推荐，但它不是有效的 CSS2.0，据我所知，它目前仍然是“标准”，不管这意味着什么。但无论如何，它不会在旧版浏览器中运行。
是的，我没有为 IE 使用 inline-block。我正在尝试为 IE6 和 IE7 工作，但主要关心 7。我无法在线显示示例，但 igoogle.com 上有一个在线工作示例。三列与顶部对齐，当一个小工具最小化时，其他小工具会向上移动以填充该空间。

标签： css internet-explorer

【解决方案1】：

也许这个资源会对你有所帮助：
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

由于您只想有 2 列，在此处查看给定的示例：
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

亲切的问候，mtness。

【讨论】：