2

如何创建多个(n 个)固定宽度的相等大小的 div,它适合整个屏幕而没有间隙,而且我必须用一些随机背景颜色填充每个 div。

4

3 回答 3

2

此代码应该有效:

// Function to get a random HEX color
function get_random_color() {
    // Make an array with all the HEX values
    var letters = '0123456789ABCDEF'.split('');
    // Put the # before our color string
    var color = '#';
    // Get 6 random HEX values and append to our color string
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    // Return the random color
    return color;
}

// Declare the number of columns, the container and calc the width of each column
var columns = 10, container = $("#container"), width = (100 / columns);

// Append to <head> a <style> tag with the rule for the width of the columns
$("head").append("<style>.col { width: " + width + "% }</style>");

// Generate N columns and append them to $container
for(var i = 0; i < columns; i++) {

    container.append("<div class=\"col\" style=\"background: " + get_random_color() + "\">Quick brown fox</div>");

}

小提琴:http:
//jsfiddle.net/6JzMB/2/

于 2013-09-17T07:42:14.583 回答
1

你需要html:

<div id="holder"></div>

和js:

var colors = new Array("ff0000","00ff00","0000ff","ff00ff","beeeef");
//instead of colors, use the randomColor function "Fez Vrasta" posted
var n = 5;

for(var i=0;i<n;i++){
    var div = document.createElement('div');
    div.className = "inlineDiv";
    div.style.backgroundColor = "#" + colors[i];
    div.style.width = ($('#holder').width() / n) + "px";
    div.style.height = "500px";
    document.getElementById('holder').appendChild(div);
}

和一些CSS:

.inlineDiv {
    display:inline-block;
    float:left;
}
#holder {
    width:100%;
}

...这是一个小提琴:http: //jsfiddle.net/2YQbx/

于 2013-09-17T07:42:58.783 回答
1

使用 javascript/jQuery,设置一个设置 div 数量的脚本。将数字除以 100,然后将该数字指定为每个 div 的宽度属性(以百分比表示)。

这将为您(取决于数量)提供 99-100% 的覆盖率。如果您想要完全覆盖,请修改脚本,以便生成的最后一个 div 将其宽度设置为 auto 。

下面的代码是一个示例,未经测试,因此您需要根据需要实现它。这只是一个指导方针。

for(i = 0; i < n; i++){
    if(i === n-1){
        $('body').append('<div style="width:auto">');
    }
    else{
        var dynamicWidth = n / 100;
        $('body').append('<div style="width:"+dynamicWidth+"%">');
    }
}
于 2013-09-17T07:33:40.817 回答