Wie starte ich eine neue Zeile in Angular 2 Templat

Question

Ich arbeite jetzt an Angular 2.

<div class="blocks"> 
    <div router-active class="block" *ngFor="let item of items"> 
    <div class="inblock"> 
     <p class="title">{{ item.name }}:</p> 
    </div> 
    </div> 
</div> 

Alles funktioniert gut in meiner Vorlage verwende ich die folgende, die Daten, die ich von den

APIs bekommen zu zeigen, aber wenn einer der div Höhe höher war als die anderen, wäre es so etwas wie das Bild aussehen unten

ich möchte nur eine schöne Reihe mit drei divs haben und nach drei Sie einen neuen Block starten, ich weiß, wie es normalerweise zu tun, aber ich kann nicht herausfinden, wie es mit kantigen 2 zu tun!

UPDATE: Ich möchte keine feste Höhe, weil der Inhalt so lang sein kann, wie der Benutzer will! Wenn Sie also eine feste Höhe mit CSS hinzufügen, wird das Problem nicht gelöst.

Answer 1

Warum erstellen Sie kein CSS, das Ihrer Vorlage zugeordnet ist, und übergeben Sie es an die Eigenschaft styleUrls. In diesem CSS können Sie eine Klasse defilieren und die div-Eigenschaften beliebig setzen und diesen Klassennamen an die Elemente übergeben.

Answer 2

Sie finden eine Lösung mit CSS. Nehmen Sie den folgenden Code:

.block { 
    float: left; 
    width: 150px; 
    margin: 10px; 
    border: 3px solid #73AD21; 
} 

.block:nth-child(3n+4){ 
    border: 1px solid red; 
    clear: both; 
} 

Der obige Code verwendet Float, um die Blöcke inline zu machen. Mit nth-child können Sie jeden dritten Block löschen.