Question

* {
  box-sizing:border-box;
}
.large {
width:66.66666667%;
padding-bottom:33.3333333%;
background-color:red;
float:left;
border:2px solid white;
}

.small {
width: 16.666666667%;
padding-bottom:16.66666667%;
background-color:green;
float:left;
border:1px solid white;
}

http://codepen.io/anon/pen/wMMrLo

我正在努力解决一个问题，我有一个响应式，基于百分比的布局，一个更大的盒子和一堆我希望包裹的小盒子。当调整每个其他像素的大小看起来很好但较小的div在50％的分辨率下停止绕着大的那个。

不确定这是否是浏览器问题所以如果它在codepen中为你工作，这里就是问题本身的截图。

http://imgur.com/a/5xNxx

任何人都知道任何快速解决方法吗？

Answer 1

这似乎是由浏览器进行像素布局而不是计算像素的分数引起的。因此，在某些情况下，这样的情况总会出现±1px或更低的不确定性。如果这么小的值会破坏你的布局，修复它的唯一方法（除了改变你的布局以使用flexbox之外）就是减去一个像素，使它总是小于太大。

Fields.Count

或者：

padding-bottom:33.2%;

作为The Faxemaxe said，您还可以在calc()内使用除法而不是长的小数字。

Answer 2

首先我强烈建议使用CSS3的calc（）函数来解决这些问题......

* {
  box-sizing:border-box;
}
.large {
width:calc(100%/3 * 2);
padding-bottom:calc(100%/3 - 1px);
background:linear-gradient(to bottom right, #bbb, #aaa);
float:left;
}

.small {
width: calc(100%/6);
padding-bottom:calc(100%/6);
background:linear-gradient(to bottom right, #222, #333);
float:left;
}

这应该解决你的问题，尝试使用'-1px'部分，在某处可能存在1px的差距......

CODEPEN：http://codepen.io/anon/pen/obboeg

Answer 3

这看起来是浏览器如何舍入小数的问题。有些人会把它围起来，有些会下来。向上舍入时，它会太大并将其下方的所有东西都向下推。

这个程序的主要原因似乎是大盒子上的填充底部。如果你将它设置为33％，它会起作用但你有时会有差距。这可以通过div周围的容器修复，并添加如下背景颜色：

.container {
  width: 100%;
  height: 40vw;
  background-color: #aaa; 
}

.large {
  width:66.66666667%;
  padding-bottom: 33%;
  background:linear-gradient(to bottom right, #bbb, #aaa);
  float:left;
}

http://codepen.io/bartuc/pen/eJJeGb

响应的Div高度（填充 - 底部百分比）像素的分数

3 个答案: