html - 如何使用 Angular 在 float 容器中显示缩略图？

Question

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

我创建了一个 float 容器并将我的 *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;}