html - CSS/Angular : Expanding a div

Question

我的元素场景是:

当用户点击“Animals”图 block 时，它应该展开并替换其他图 block 。同样，点击“植物”图 block 时，它应该展开，其他图 block 应该重新排序。

===========第一个 View :============

===========第二个 View ==============

第一页显示，平铺 View

第 2 页显示，单击磁贴时展开的 div。

请帮我实现这个。

我的代码如下。我能够显示隐藏展开的图 block ，但我无法隐藏用户单击并重新排序图 block 的图 block 。有什么提示可以实现这一目标吗？我不想展开和收缩动画。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  showDiv:boolean = false;
  showDetails():void{
    this.showDiv = !this.showDiv;
  }
}

<div *ngIf="showDiv" style="width:450px;height:150px;border:2px solid black">
  Expanded div
</div>
<br/>
<div (click)="showDetails()" style="width:100px;height:100px;border:2px solid black;clear:both;float:left">
  tile 1
</div>
<div style="width:100px;height:100px;border:2px solid black;float:left;margin-left:10px">
  tile 2
</div>
<div style="width:100px;height:100px;border:2px solid black;float:left;margin-left:10px">
  tile 3
</div>

Answer 1

我建议您为此使用 flexbox (css)。 单击这些图 block 只需更改 flexbox 属性。