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

Question

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

---

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

theme-flexfix.scss 在使用 flex 时均等地固定所有图像宽度。 flex-container-wrap-items() 使容器 flex 和 flex-wrap。 .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%;
}

---

image-details.component.html

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

image-details.component.scss

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

---

尝试了注释样式以产生我想要的内容，但没有推送其他内容。我认为有一个简单的解决方案，但现在我无法得到它。

感谢您的帮助。

Answer 1

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

我会这样做：

1. 点击图片时，计算您在一行中显示的图片数量。
2. 在行中的最后一张图片之后注入带有较大版本图片的 DIV。

这个想法是始终在当前行结束后注入 DIV。

这样，您的 DIV 将不会被绝对定位，而是会随着 HTML 流动，并且不需要绝对定位黑客。