使用CSS绘制网格

我正在寻找一种使用CSS(如果必要的话)在div中绘制网格(即 http://www.artlex.com/ArtLex/g/images/grid.gif)的方法。感觉就像是相对来说挺直的，但是我一直没能弄清楚。任何建议将不胜感激。

先谢谢你，
莱尼

解决方法

这是一个使用jQuery的简单解决方案。这个脚本会尝试填补尽可能多的网格元素，而不会溢出。该函数接受一个参数，它定义了网格的大小。

function createGrid(size) {
    var ratioW = Math.floor($(window).width()/size),ratioH = Math.floor($(window).height()/size);

    var parent = $('<div />',{
        class: 'grid',width: ratioW  * size,height: ratioH  * size
    }).addClass('grid').appendTo('body');

    for (var i = 0; i < ratioH; i++) {
        for(var p = 0; p < ratioW; p++){
            $('<div />',{
                width: size - 1,height: size - 1
            }).appendTo(parent);
        }
    }
}

它还需要一个简单的CSS样式：

.grid {
    border: 1px solid #ccc;
    border-width: 1px 0 0 1px;
}

.grid div {
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
    float: left;
}

看到一个简单的演示：http://jsfiddle.net/yijiang/nsYyc/1/

这里有一个使用本机DOM函数。我也应该改变初始比例计算使用DOM函数，但我不能为我的生活得到window.innerWidth返回准确的数字固定：

function createGrid(size) {
    var ratioW = Math.floor((window.innerWidth || document.documentElement.offsetWidth) / size),ratioH = Math.floor((window.innerHeight || document.documentElement.offsetHeight) / size);

    var parent = document.createElement('div');
    parent.className = 'grid';
    parent.style.width = (ratioW * size) + 'px';
    parent.style.height = (ratioH * size) + 'px';

    for (var i = 0; i < ratioH; i++) {
        for (var p = 0; p < ratioW; p++) {
            var cell = document.createElement('div');
            cell.style.height = (size - 1) + 'px';
            cell.style.width = (size - 1) + 'px';
            parent.appendChild(cell);
        }
    }

    document.body.appendChild(parent);
}

createGrid(10);

它基本上是jQuery代码的直接翻译。如果您需要更多的性能，您可以切换到使用推送到数组的字符串生成框：

arr.push('<div style="width:',(size - 1),'px;height:','px;"></div>');

然后在最后

parent.innerHTML = arr.join('');

原文链接：https://www.f2er.com/css/218135.html

解决方法

猜你在找的CSS相关文章