html - 图像内的响应式 div 按钮

Question

我有一个砖石图像库，我想在每个图像上放置一个带有按钮的 div。

我的问题是 div 没有响应，当我缩小屏幕时，一些按钮消失而不是减慢速度并跟随屏幕的移动。

我打算通过缩小屏幕，按钮也会缩小，但仍然全部出现在 div 内。

HTML

 <ul class="mdc-image-list mdc-image-list--masonry masonry-image-list second">
      <li class="mdc-image-list__item" *ngFor="let image of list; let  i = index;">
          <img [src]="image" class="mdc-image-list__image">
        <div class="mdc-image-list--with-text-protection">
          <div class="mdc-image-list__supporting">
          </div>
        </div>
      </li>
    </ul>

Answer 1

这里要解决的主要问题是使图标彼此相邻对齐，不使用margin-left或float: left; 。您可以使用 display: flex; 和 justify-content: space- Between; 到父类 (.mdc-image-list__label )。这可确保每个元素彼此相邻显示，并且之间的空格确保每个元素之间的间距相等。了解有关 Flexbox 的更多信息，请访问 MDN 。

已更新StackBlitz进行调整。

.Pin{
  margin-top: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.Inbox{
  width: 30px;
  height: 30px;
  margin-top: 8px;
  cursor: pointer;
}

.Chat{
  width: 30px;
  margin-top: 10px;
  height: 27px;
  cursor: pointer;
}

.Task{
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin-top: 8px;
}

// Adjusting this class
.mdc-image-list__label {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box; // To make sure it encapsulates the padding styling
}