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 回答