跨 Angular 组件相对于父级父级的 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。

想法是始终在当前行结束后注入(inject) DIV。

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