IE7 div 框清晰：右和浮动：左 - 浮动到顶部答案

【问题标题】：IE7 div boxes with clear: right and float: left - float to topIE7 div 框清晰：右和浮动：左 - 浮动到顶部
【发布时间】：2010-04-08 18:39:18
【问题描述】：

最近我一直在用头撞我的桌子来解决这个问题。没有成功。我知道可以通过使用一些清除元素编辑内容来解决。遗憾的是，使用了一些 javascript 排序蜜蜂，并且 Sourcode 是由 CMS 组件生成的，所以这将是我的最后一次尝试。

我有几个盒子总是连续漂浮 2 个。这些盒子的高度不同但宽度相等，并且都放置在具有静态宽度的容器中。该链接显示了我需要重现问题的来源。我的盒子正在向左浮动。我试图用 clear: left on odd and clear: right on even elements 来解决这个问题。但这仅适用于 ff/ie8/chrome 浏览器，不适用于 ie7。

示例：http://www.i3rutus.de/ie7divfloatexample/

任何人都知道通过编辑 CSS 而不是实际的 XHTML 来解决这个问题的可能性吗？问题出现在 IE7 中。 IE8、Chrome 和 FF 工作正常。

有什么想法吗？

提前致谢

【问题讨论】：

标签： css css-float internet-explorer-7

【解决方案1】：

这是交易。您只需要浮动每对盒子中的一个。这是修改后的css规则：

  .even {
  float: left;
  clear: left;
  margin-top: 0
  }

  .odd {            
  }

Demo

（顺便说一句，你对奇数和偶数的使用让我追了一段时间；））

【讨论】：

对不起，我的错误。您的解决方案在 ie7 中运行良好，而不是在 ie8 和 ff 中，因为我意识到。所以我可以在我的浏览器特定样式中使用它。非常感谢。

【解决方案2】：

只需删除

.even {
    clear: left;
}
.odd {
    clear: right;
}

它按预期工作。

【讨论】：

【解决方案3】：

如果您能够在标题中包含一个 js，那么也许可以尝试使用http://code.google.com/p/ie7-js/？

我玩过它，但给定了 float:right 搞砸了，它可能比尝试浮点值复杂一点。

-- 更新--

我似乎能够通过以下方式在 ie7 中运行它：

删除浮动：离开.clear，将 float:left;margin-top:0px 添加到 .even

【讨论】：