Question

大家圣诞快乐，今年我再次陷入了一些冒险生意。我正试图随机将我的一个绿色盒子变成一个红色的盒子。我使用了渐变图案来生成绿色条纹，但是我的红色框也很小，即使它们都是3em！什么脚跟!!!

请查看我的codepen交易：http://codepen.io/githubmaht/pen/jinHo

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var wrapper = document.createElement('wrapper');
wrapper.className = 'wrapper';
wrapper.style.cssText = "display:block;position:relative;height:100%;width:100%;";
document.body.appendChild(wrapper);

var bigholdery = document.createElement('bigholdery');
bigholdery.className = 'bigholdery';
bigholdery.style.cssText="display:block;position:absolute;left:0;top:0;height:50%;width:50%;overflow:auto;";
document.getElementsByClassName('wrapper')[0].appendChild(bigholdery);

// green bars!!!

var big = document.createElement('big');
big.className = 'big';
big.style.cssText="display:block;position:relative;height:300em;background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, green), color-stop(.5, transparent), to(transparent));-webkit-background-size: 6em 6em;";
document.getElementsByClassName('bigholdery')[0].appendChild(big);

// make one red!!!

var redoffset = 3*getRandomInt(0,49);
var red = document.createElement('red');
red.className = 'red';
red.style.cssText="font-size:12px;display:block;position:absolute;top:0;left:0;height:3em;width:100%;background:red;margin-top:"+redoffset+"em;";
document.getElementsByClassName('bigholdery')[0].appendChild(red);

CSS -----＆gt;

html{
position:relative;
height:100%;
width:100%;
font-size:12px;
}

body{
position:relative;
height:100%;
width:100%;
background:#BEDFED;
}

.wrapper {
position:relative;
display:block;
height:100%;
}

Answer 1

你的绿色渐变实际上是300em。请在代码中查看此行：

big.style.cssText="display:block;position:relative;height:300em;

为什么我的3em div小于我的3em渐变模式？

1 个答案: