CSS相对于父角度组件的父级定位

Question

目前我正在开发图像galery和图片上传工具。在下图中，展示了我当前和我想要的galery状态。用户可以单击缩略图并查看当前缩略图行下方的大图片，以相对于组件高度推送下一行。

images.component.html

<div class="container">
  <div class="image-box" *ngFor="let img of images$ | async">
    <img class="mat-elevation-z1" [src]="environment.img + '/images/thmb/' + img.id + '.jpg'" (click)="selected = img">
    <app-image-details *ngIf="selected?.id === img.id" [img]="img"></app-image-details>
  </div>
</div>

images.component.scss

使用flex时， theme-flexfix.scss 可以平等地修复所有图像宽度。 flex-container-wrap-items()使容器弯曲和弯曲包裹。 .image-box项目是flex：1。

@import 'src/theme-flexfix.scss';

.container {
  @include flex-container-wrap-items(128px);
}

.container > .image-box {
  @include flex-wrap-fix(128px);
  padding: 4px;
  box-sizing: border-box;
  /* position: relative; */
}

img {
  width: 100%;
}

图片-details.component.html

<img [src]="environment.img + '/images/' + img.id + '.jpg'">
<p>
  Lorem ipsum
</p>

图片-details.component.scss

:host {
  /* position: absolute */
  /* left: 0 */
}

尝试评论的样式导致我想要的，但不推送其他内容。我认为有一个简单的解决方案，但现在我无法得到它。

感谢您的帮助。

Answer 1

我假设您正在尝试复制Google图片搜索。

我会这样做：

1. 单击图像时，计算要显示的行中的图像数量。
2. 在行中最后一张图片之后，使用较大版本的图片注入DIV。

我们的想法是在当前行结束后始终注入DIV。

这样，您的DIV将不会绝对定位，而是将使用HTML流动，并且不需要绝对定位黑客攻击。