图片内的响应式 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; 对父级 class (.mdc-image-list__label) 执行此操作。这可确保每个项目彼此相邻显示和 space-between 确保每个元素之间的 space 相等。在 MDN 阅读更多关于 flexbox 的内容。

更新 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
}

Answer 2

每张图片的单独 class 是没有根据的，因此您可以删除它，它也与 css 相关。下面的 css 将解决您的问题，它更通用也更好。

.mdc-image-list__supporting a {
  width: 25%;
  display: inline-block;
  text-align: center;
}

.mdc-image-list__supporting a img {
   width: 25px;
   height: 25px;
   cursor: pointer;
   margin: 10px 0;
}

图片内的响应式 div 按钮

Responsive div buttons inside Image

html

css

typescript

masonry

angular