Image 内的响应式 div 按钮答案

【问题标题】：Responsive div buttons inside ImageImage 内的响应式 div 按钮
【发布时间】：2023-03-21 20:10:02
【问题描述】：

我有一个砖石图像库，我想在每个图像上放置一个带有按钮的 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>

【问题讨论】：

标签： html css angular typescript masonry

【解决方案1】：

这里要解决的主要问题是使用margin-left 或float: left; 将图标彼此相邻对齐，不。您可以使用 display: flex; 和 justify-content: space-between; 对父类 (.mdc-image-list__label) 执行此操作。这可以确保每个项目彼此相邻显示和space-between 确保每个元素之间的空间相等。在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
}

【讨论】：

【解决方案2】：

每个图像的单独类是没有根据的，因此您可以将其删除，并且它也是相关的 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;
}

【讨论】：