响应式 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

首先，我强烈推荐使用 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 2

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

padding-bottom:33.2%;

或者：

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

作为 Faxemaxe , you can also use division instead of insanely long decimals inside calc()。

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 像素的高度（填充底部百分比）分数

Responsive Div Height (Padding-Bottom Percent) Fraction of a Pixel

html

css

percentage

responsive-design