響應股利高度（填充，底部百分比）分數

* { 
    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

任何人都知道任何權宜之計？

來源

2015-12-15 Mark McDermid

首先，我強烈建議使用CSS3的鈣（）函數來解決這樣的事情......

* { 
    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

來源

2015-12-16 00:51:09

這似乎是由瀏覽器做像素佈局，而不是計算到像素的分數造成的。因此，在這種情況下，總會出現±1px或更小的不確定性。如果這樣一個小的值會破壞你的佈局，修正它的唯一方法（除了改變你的佈局以使用flexbox之類的東西），就是減去一個像素，使其始終小於太大。

padding-bottom:33.2%;

或者：

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

爲Faxemaxe said，你也可以使用，而不是分裂瘋狂長小數內calc()。

來源

2015-12-16 00:51:52 bjb568

的瘋長小數是剛剛從上海社會科學院輸出！ –

這看起來是瀏覽器如何舍入小數的問題。有些人會圍繞它，有些會倒下。四捨五入時，它將會過大，並將所有內容直接推下。

這個程序中的主要原因似乎是大盒子上的填充底部。如果你把它設置成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

來源

2015-12-16 01:01:08

不幸的是，在現實生活中，這些背景圖片實際上並沒有真正的效果。我想我需要做一些javascript，如果我真的想要一個完美的邊緣，而不使用flexbox。 –

響應股利高度（填充，底部百分比）分數

回答

相關問題