如何使用Angular在浮动容器中显示缩略图？

Question

我已经创建了几个样本产品。现在我能够很好地显示它，但不知何故产品是垂直显示的。我希望它一旦最大化浮动空间就会水平显示下一个缩略图可以移动到下一行。

我创建了一个浮动容器并将我的* ngfor放入其中。我缺少什么？

这是我的HTML代码，

<div class="text-center m-t-lg">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">


  <h1>Public Shared Diary</h1>

  <div class="container-fluid">

  <div *ngFor="let pub_diary of diaries_temp;let i = index" [attr.data-index]="i">

    <div class="container-fluid">
      <div class="thumbnail" style="min-height:320px;height:320px;min-width:220px;width:220px;">
        <h2>Project title = {{pub_diary.project_name}}</h2>
        <img style="min-height:150px;height:150px;" src="{{pub_diary.project_image}}">
      </div>
    </div>

  </div>
  </div>



</div>

这是当前的输出。红色标记是我想要缩略图的地方。

Answer 1

添加

.thumbnail {display: inline-block; vertical-align: middle;}

Answer 2

我找到了答案。我需要创建一个新的div来包含一个

问题已解决。