Wie erstelle ich ein Waben-Div-Raster anstelle des Standardrasters?

Question

Hier ist eine grobe normale Gitterstruktur: http://jsfiddle.net/CFxzH/1/

Ich versuche zu erstellen, was ich ein Wabengitter anstelle der Standard-div-Raster nennen. Hier ist eine grobe Illustration.

NORMAL GRID

[] [] [] [] [] 
[] [] [] [] [] 
[] [] [] [] [] 
[] [] [] [] [] 
[] [] [] [] [] 

Wabe

[] [] [] [] [] 
    [] [] [] [] 
[] [] [] [] [] 
    [] [] [] [] 
[] [] [] [] [] 

Was ich möchte auch dynamisch 100% Breite des Kastens Eltern erreichen, wobei die Breite des Fensters zu erweitern.

Answer 1

Recycling @ bfavrettos Antwort hier.

http://jsfiddle.net/CFxzH/2/

Etwas wie diese zu erhalten ist das getan Job.

var boxes_per_even_line = Math.floor($('#boxes').width()/110); 
var boxes_per_odd_line = boxes_per_even_line-1; 
var boxes_every_two_lines = boxes_per_even_line + boxes_per_odd_line; 
console.log(boxes_per_even_line, boxes_per_odd_line, boxes_every_two_lines) 
var boxes = $('.box'); 
var total = boxes.length; 

for(var i=boxes_per_even_line; i<total; i+=boxes_every_two_lines) { 
    $(boxes[i]).css('margin-left', 65); 
    $(boxes[i+boxes_per_odd_line-1]).css('margin-right', 65); 
} 

Answer 2

Sie können die x-Achse auf einen Wert der halben y-Achse einstellen und dann einen Durchmesser zum Bucket hinzufügen. Dies funktioniert auch mit einem Sechseck. Hier ist eine Frage zu einer schnellen Rastersuche: Optimizing search through large list of lat/long coords to find match.