Question

我正在使用详细信息页面的UI。该页面正在从数据库中获取其内容，该数据库会动态更新内容。到目前为止，UI看起来就像我链接的图像

但是，当div的内容更改时，会导致图像被过多覆盖。

HTML如下。

<ion-content >
    <ion-title *ngIf="item">{{item.title}}</ion-title>
  <div class="container">
  <div class="content">
    <div *ngFor ="let image of image" >
        <ion-row>
          <ion-col size="12" offset="0">
            <img  id ="image" [src]="image" alt="this is the image"/>
          </ion-col>  
        </ion-row>
      </div>
    </div>
    <div class="overlay">
        <ion-buttons slot="start">
            <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
          </ion-buttons>
          <h2>{{item.title}}</h2>
          <p>{{item.description}}</p></div>
  </div>
</ion-content>

CSS如下

.container {
  display: grid;
 }

 .content, .overlay {
   grid-area: 1 / 1;
 }

 .content {
   margin-top: 20px;
 }

 .overlay {
  width: 100%;
  border-radius:  0px 0px 30px 30px; 
  background-color: #ffffff;
  opacity: 1;
  position: absolute;

 }

如何在不覆盖div下方图像的情况下动态更新div的内容？有没有一种方法可以在图像由于文本较多而变大时将图像向页面下推？

Answer 1

由于您使用的是CSS网格，因此可以消除.overlay类上的绝对位置。

使您的.container类具有此附加属性grid-template-rows: max-content minmax(0, 1fr);

然后，您可以像平常一样将.overlay放在网格的第一行，然后将.content放在第二行，以便它们堆叠。在.overlay上放margin-bottom: "however much you want it to overlap。这样会使它们稍微重叠，同时随着.overlay中内容的增加而下推图像。如果最终按照源顺序将.overlay放在.content之前，则需要在position: relative;上添加.overlay，以使其出现在图像上方。所以基本上您的3个班级应该看起来像这样-

.container {
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr);
 }

 .content {
   grid-row: 2 / 3;
 }

 .overlay {
  width: 100%;
  grid-row: 1 / 2;
  border-radius:  0px 0px 30px 30px; 
  background-color: #ffffff;
  opacity: 1;
  margin-bottom: -10px;
 }

您实际上是在两个容器的各自行中设置了两个不重叠的容器，然后使用负边距将图像稍微拉到消息下方。不要忘记，如果您最终更改了HTML顺序并将.overlay放在.content上方，则需要给它一个position: relative;，使其显示在.content上方。这有效地为叠加层创建了一个新的叠加上下文，始终将其置于图片上方。如果您最终将.overlay放在源代码顺序中的.content上方，那么就不必使用CSS网格了-就是这样。

如何将html <div>正确重叠在另一个<div>上？

1 个答案: