我正在尝试创建一个动态网站,其中我有三个彼此相邻的 float 框。它们每个的宽度为 33.33%。它们周围的容器 div 的宽度为 75%。
我在这里找到了一篇关于该问题的文章:CSS: Jumping columns
我还在此处找到了相同问题的示例:Jumping columns example
在 IE7 或更早版本中拖动窗口大小以查看跳跃。
有人知道是否可以解决这个问题吗? (没有 Javascript)
最佳答案
我根据情况使用两种不同的解决方案。首先,尝试 Nicole Sullivan 方法(在一行中的最后一个元素上使用 overflow: hidden;
而不是 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;
}
这在大多数情况下都有效。
否则,我会向最后一个元素添加几个像素的负边距。
.box2 {
width: 33.33%;
float: left;
display: inline; /* fixes another IE bug */
margin-right: -3px;
}
如果最后一个元素向右浮动,只需在左侧添加负边距。到目前为止,在 overflow
不适合的少数情况下,这对我有用。
关于css - 我如何解决 IE CSS 百分比舍入问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1084469/