Angular 2のテンプレートで新しい行を始める方法

Question

私はAngular 2で作業中です。私のテンプレートでは、私はすべてが正常に動作しますがdiv要素の高さの一つは、それが

下の画像のようになり、他のものよりも高かった場合されたAPIから

<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> 

を取得したデータを表示するには、次を使用しています

私は3つのだけのdivで素敵行を持っており、3の後に、新しいブロックを開始したい、私は通常、それを行う方法を知っているが、私は角2でそれを行う方法を見つけ出すことはできません！

更新日：コンテンツはユーザーが望む限り長くすることができるため固定高さは必要ありません！ CSSで一定の高さを追加しても問題は解決しません

Answer 1

テンプレートに関連付けられた「css」を作成し、styleUrlsプロパティに渡すのはなぜですか。そのCSSでは、クラスを削除し、好きなようにdivプロパティを設定し、そのクラス名を要素に渡すことができます。

Answer 2

あなたはcssを使用して解決策を見つけるでしょう。このコードを取る：

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

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

上記のコードは、ブロックをインライン化するためにfloatを使用しています。 nth-childを使用すると、各3番目のブロックをクリアするように指示できます。