我沿著多行顯示一些不同尺寸的圖像。 此處範例
但是行之間有間隙。我嘗試了很多,但找不到原因。
<div class="muralBox"> <div class="wrapper"> <div v-for="(topAlbum, i) in topAlbumInfo.value" :key="topAlbum.name" class="albums"> <Album :info="topAlbum" :width="layoutConfig[i].width"/> </div> </div> </div>
在Album.vue中
<img :src="img" :width="width" :height="width" alt=""/>
和CSS:
.muralBox { margin: auto; max-width: 400px; min-width: 400px; } .wrapper { background: #1f1c2c; display: flex; flex-wrap: wrap; }
我不確定這是否正是您想要的,因為我看不到您如何設計它們的樣式,但我只是給了圖像100% 的高度和寬度,這基本上是在代碼筆中完成的。
CodePen 連結