Question

我正在尝试创建一个动态网站，其中我有三个浮动框彼此相邻。它们的宽度分别为33.33％。它们周围的容器div宽度为75％。

我在这里找到了一篇关于这个问题的文章：CSS: Jumping columns
我在这里也找到了同样问题的一个例子：Jumping columns example

拖动窗口大小以查看IE7或更早版本中的跳转。

任何人都知道是否有可能解决这个问题？（没有Javascript）

Answer 1

我根据具体情况使用两种不同的解决方案。首先，尝试使用Nicole Sullivan方法（在行中的最后一个元素上使用overflow: hidden;而不是float / width）：

.container {
  width: 75%;
}

.box1 {
  width: 33.33%;
  float: left;
  display: inline; /* fixes another IE bug */
}

.box2 {
  overflow: hidden;
}

这在大多数情况下都适用。

如果不这样做，我会向最后一个元素添加几个像素的负边距。

.box2 {
  width: 33.33%;
  float: left;
  display: inline; /* fixes another IE bug */
  margin-right: -3px;
}

如果最后一个元素向右浮动，只需在左侧添加负边距。到目前为止，在overflow不适合的少数情况下，这对我有用。

Answer 2

在这样的情况下，我倾向于使用仅限IE的样式表来解决问题，这些样式表会篡改值，直到它们工作。在这种情况下，只需将宽度设置为33％，它就不会是完美的，但那只是网络的本质。

Answer 3

我认为一个简单的答案可能是根本不圆，只需创建一个1％宽度的最终“spacer”元素，它共享1/3元素的外观。即使IE应该能够处理33 + 33 + 33 + 1舍入。

Answer 4

我遇到了同样的问题。 ie7没有正确地呈现33.33％。它可以使用33％，但后来它是一个发际线。我在上面的第一个响应中使用了第二个代码块的建议，加上一点即黑客。它对我有用，我希望它有所帮助。

.all-boxes {
   width: 33.33%;
   float: left;
   display: inline;
   *margin-right: -1px; /* Add the asterisk */
 }

保证金价值可能需要根据您的实施情况进行更改，但1px对我有效。