html - 像素的响应 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% 时停止环绕大的。

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

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

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

Answer 1

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

padding-bottom:33.2%;

或者:

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

作为 Faxemaxe said ，您还可以在 calc() 中使用除法而不是非常长的小数.