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

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% 的分辨率停止环绕大的 div。

不确定这是否是浏览器问题，所以如果它在 codepen 中对您有用，这里是问题本身的屏幕截图。

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

有人知道快速修复方法吗？

Answer 1

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

padding-bottom:33.2%;

或者：

padding-bottom:calc(33.3333333% - 1px);

作为 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 间隙...

编解码器：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