html - نمایش فایلهای انتخابشده به صورت فهرست

من از کتابخانه ngx-dropzone استفاده میکنم که به من اجازه میدهد چندین فایل را انتخاب کنم.

در این زمان، فایلهای انتخابشده به صورت افقی نمایش داده میشوند اما به روشی که من میخواهم نیستند.

قبلاً تلاش کردهام از انواع مختلف CSS استفاده کنم و موفق نبودهام، آیا کسی میتواند به من کمک کند؟

[دمو][1]

پاسخ شماره ۱

شما باید سبکدهی پیشفرض ngx-dropzone را با برخی سبکهای شبکه CSS بازنویسی کنید تا اثر داشته باشد.

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%;
}

این سبکدهی پیشفرض فعلی را نادیده میگیرد و تصاویر رها شده را کنار هم قرار میدهد. برای مثال، این StackBlitz بهروز شده را ببینید.

نتیجه

تنها کاری که هنوز باید انجام دهید این است که استایلدهی برای آیتمهای رها شده اضافه کنید اگر پنجره دید بزرگتر شود.