Wie kann ich ein 40x40-Raster mit divs erstellen?

8

Ich versuche im Grunde, mit Javascript ein 40x40 rotes Gitter von divs in meinem HTML-Dokument zu erstellen.

Hier ist meine Schleife:

%Vor%

Das Problem ist, dass ich es nicht dazu bringen kann, ein Quadrat aller von mir erstellten divs zu bilden. Der Behälter ist 1000 x 1000 px. Danke

    
abedzantout 19.10.2015, 20:40
quelle

7 Antworten

4

Ich glaube, was Sie wollen, ist das Folgende:

%Vor% %Vor% %Vor%

Ihre inneren divs können Inline-Blockelemente sein, so dass sie nebeneinander fließen (da divs standardmäßig Blockebene sind). Sie müssen nach jeder inneren (j) Schleife auch einen Zeilenumbruch einfügen. Der Prozess wäre also: 40 Inline-Divs generieren, einen Zeilenumbruch einfügen, 40 Inline-Divs erzeugen, einen Zeilenumbruch einfügen, ... (38 Mal wiederholen).

    
j08691 19.10.2015, 20:49
quelle
5

Sie müssen nur die letzten 3 Zeilen innerhalb der inneren Schleife (nicht innerhalb der äußeren Schleife) einfügen:

%Vor%

Vergessen Sie auch nicht, die 'Anzeige' auf 'Inline-Block' zu setzen:

%Vor%

Oder Sie müssen das Attribut 'float' verwenden:

%Vor%

BEARBEITEN:

Verwenden Sie row-div, um alle 40 Zellen in einer Zeile zu gruppieren:

%Vor%     
Houmam 19.10.2015 20:47
quelle
4

Zuerst müssen Sie das erstellte div an jede Schleifeniteration anhängen.

Zweitens müssen Sie die divs als display: inline oder display: inline-block

setzen

%Vor% %Vor% %Vor%
    
LcSalazar 19.10.2015 20:48
quelle
2

Hier werden tatsächlich 40 divs in 40 übergeordneten divs (wie Zeilen) erstellt:

%Vor%

Ссылка

    
DataHerder 19.10.2015 20:51
quelle
2

Ein bisschen CSS und inline-block

hinzufügen

Div s sind normalerweise Blockelemente. Sie müssen Inline-Blöcke erstellen, um Sie bei Ihrem Raster zu unterstützen.

Wenn Sie die Linienlücken entfernen möchten, spielen Sie mit den Margen (d. h. margin: 0; reduzieren oder margin: 0 1px; addieren Sie die Seiten jedes Quadrats)

%Vor% %Vor% %Vor%
    
ochi 19.10.2015 20:46
quelle
2

Sie können eine Mischung aus CSS, HTML und Javascript verwenden.

IMHO, der beste Weg ist, Vorteile von CSS-Klassen zu nutzen und anstatt jedes Element einzeln in Javascript zu erstellen, können Sie cloneNode() benutzen, um die erste "Box" zu klonen.

Hier ist ein Beispiel ( Geige hier ) und ein Ausschnitt darunter

%Vor% %Vor% %Vor%
    
Tivie 19.10.2015 20:55
quelle
1

Hier wird es für Sie tun:

%Vor%

CSS

%Vor%

Siehe Beispiel: Ссылка

    
Adam Buchanan Smith 19.10.2015 20:55
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset jQuery-Tooltipp onClick?