问题描述
我正在寻找一种绘制网格的方法(即 http:///www.artlex.com/ArtLex/g/images/grid.gif) 在 div 内，使用 CSS(必要时使用 JS).感觉它应该相对简单，但我一直无法弄清楚.任何建议将不胜感激.
提前谢谢你，莱尼
这里有一个使用 jQuery 的简单解决方案.该脚本将尝试在不溢出的情况下填充尽可能多的网格元素.该函数接受一个参数，该参数定义了网格的大小.
function createGrid(size) {var ratioW = Math.floor($(window).width()/size),ratioH = Math.floor($(window).height()/size);var parent = $('<div/>', {类:'网格'，宽度:比率W * 大小，高度:比率H * 大小}).addClass('grid').appendTo('body');for (var i = 0; i < ratioH; i++) {for(var p = 0; p ', {宽度:尺寸 - 1，高度:尺寸 - 1}).appendTo(父);}}} 它还需要一个简单的 CSS 样式:
.grid {边框:1px 实心#ccc；边框宽度:1px 0 0 1px；}.grid div {边框:1px 实心#ccc；边框宽度:0 1px 1px 0；向左飘浮;}在这里查看一个简单的演示: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 = '网格';parent.style.width = (ratioW * size) + 'px';parent.style.height = (ratioH * size) + 'px';for (var i = 0; i < ratioH; i++) {for (var p = 0; p 它基本上是 jQuery 代码的直接翻译.如果您需要更高的性能，您可以切换到使用推送到数组的字符串来生成框:
arr.push('<div style="width:', (size - 1), 'px;height:', (size - 1), 'px;"></div>');然后在最后
parent.innerHTML = arr.join('');I'm looking for a way to draw a grid (i.e. http://www.artlex.com/ArtLex/g/images/grid.gif) inside of a div, using CSS (and JS if necessary). It feels like it should be relatively straight forward, but I haven't been able to figure it out. Any advice would be greatly appreciated.
Thank you in advance, Lenny
Here's a simple solution using jQuery. This script will try to fill in as many grid element as possible without overflowing. The function accepts a single parameter, which defines the size of the grid.
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);
}
}
}
It also requires a simple CSS style:
.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;
}
See a simple demo here: http://jsfiddle.net/yijiang/nsYyc/1/
Here's one using native DOM functions. I should also change the initial ratio calculation to use DOM functions but I cannot for the life of me get fixed that: window.innerWidth to return accurate numbers
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);
It's basically a direct translation of the jQuery code. If you need even more performance you can switch to generating the boxes using strings pushed to an array:
arr.push('<div style="width:', (size - 1), 'px;height:', (size - 1), 'px;"></div>');
then at the end
parent.innerHTML = arr.join('');
这篇关于使用 CSS 绘制网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！