Question

如何创建相同大小的多个（n数）固定宽度div，它可以无间隙地适合整个屏幕，而且我必须用一些随机背景颜色填充每个div。

Answer 1

此代码应该有效：

// 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/

Answer 2

使用javascript / jQuery，设置一个设置div数量的脚本。将数字除以100，然后将该数字指定为每个div的width属性（百分比）。

这将为您提供（取决于数量）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+"%">');
    }
}

Answer 3

你需要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/

动态创建相同大小的多个固定宽度div

3 个答案: