以列表形式显示所选文件

Question

我正在使用允许我选择多个文件的 ngx-dropzone 库。

此时选中的文件是水平显示的，但不是我想要的样子。

已经尝试使用各种类型的 css，但没有成功，谁能帮助我？

[演示][1]

Answer 1

您需要使用一些 CSS 网格样式覆盖 ngx-dropzone 的默认样式才能生效。

ngx-dropzone {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  height: auto;
}

ngx-dropzone ngx-dropzone-preview {
  display: flex;
  height: 100px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  position: relative;
  width: 100%;
}

这会覆盖当前的默认样式并将放置的图像并排放置。见this updated StackBlitz as example。

结果

如果视口变大，您唯一需要做的就是为拖放的项目添加样式。