html - 如何操作标签内的内容

Question

我在将我的图标与描述对齐以使其负责时遇到了一些问题。实际上，我有一张卡片，其中包含标题、描述和一个内部有背景图像的 div，但是如果屏幕最大化，我需要在图像下方设置描述，但如果屏幕是最小尺寸，描述应该显示在图像的同一行。

.myCard {
  .card-link {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 9px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: default;
  }
}

<div class="myCard">
  <div class="container-fluid relative-position">
    <a class="col col-12 link-style" (click)="onClicked()">
      <div class="row content">
        <div class="col">
          <div class="information">
            <h1 id="title" role="heading" class="title">{{ title }}</h1>
            <p id="description" role="text" class="description">{{ description }}</p>
          </div>
        </div>
        <div class="col image" [ngStyle]="{'background-image': getURLfromImage()}">
        </div>
      </div>
    </a>
  </div>
</div>

例子：

标签： htmlcssangularresponsive-design

Answer 1

您可以尝试使用 css grid 和 grid-areas ：

.card-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items:  center;
  border: 1px solid black;
  padding: 1em;
}

#description { 
  grid-area: 2 / 1 / 3 / 3; 
} 

#description, #title {
  justify-self: left;
}


@media (max-width: 601px) {
  #description { 
    grid-area: 2 / 1 / 3 / 2; 
  } 
  .image {
    grid-area: 1 / 2 / 3 / 3;; 
  }
}

<div class="myCard">
  <div class="container-fluid relative-position">
    <a class="col col-12 link-style" (click)="onClicked()">
      <div class="row content card-link">
        <h1 id="title" role="heading" class="title">title</h1>
        <p id="description" role="text" class="description">
          description description description description description description
          description description description description description description
         </p>
        <img class="col image" src="https://picsum.photos/70">
      </div>
    </a>
  </div>
</div>