6

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

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

在 IE7 或更早版本中拖动窗口大小可以查看跳跃。

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

4

4 回答 4

14

I use two different solutions depending on the situation. First, try the Nicole Sullivan approach (using overflow: hidden; on the final element in a row instead of float/width):

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

.container {
  width: 75%;
}

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

.box2 {
  overflow: hidden;
}

This works in most cases.

Failing that, I add a negative margin of several pixels to the last element instead.

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

If that last element is floated right instead, just add the negative margin to the left. So far that has worked for me in the few cases where overflow didn't fit.

于 2009-08-21T09:35:42.173 回答
2

在这种情况下，我倾向于使用仅 IE 的样式表来解决问题，该样式表在值起作用之前会对其进行篡改。在这种情况下，只需将宽度设置为 33%，这并不完美，但这就是网络的本质。

于 2009-07-05T17:33:00.587 回答
0

我认为一个简单的答案可能是根本不圆，只需创建一个宽度为 1% 的最终“间隔”元素，该元素与 1/3 元素的外观相同。甚至 IE 也应该能够处理 33 + 33 + 33 + 1 的舍入。

于 2009-10-04T03:46:44.140 回答
0

我有同样的问题。ie7 没有正确渲染 33.33%。它可以在 33% 的情况下使用，但随后就差了一点。我在上面的第一个响应中使用了第二个代码块中的建议，加上一点 ie hack。它对我有用，我希望它有帮助。

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

边距值可能需要根据您的实现进行更改，但 1px 对我有用。

于 2013-10-09T14:48:11.617 回答