縮略圖網格顯示在列中

Question

我正在嘗試創建包含多個縮略圖的網格，但是我遇到了同樣的問題，那就是我的圖像位於列中。 確實，我每行只有一張圖像，而我想要盡可能多。

這是我要實現的示例： https : //codepen.io/pjhooker/pen/lFuDK

    <div>
     <ul>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
     </ul>
    </div

問題是，即使使用此代碼，我的圖像也會保留在彼此下方的列中

這是我的代碼中的內容：

<template>
    <div>
        <div>
            <div class="hex-row even">
                <Hexagon v-for="n in 7" v-bind:key="n"/>
            </div>
            <div class="hex-row">
                <Hexagon v-for="n in 7" v-bind:key="n"/>
            </div>
            <div class="hex-row even">
                <Hexagon v-for="n in 7" v-bind:key="n"/>
            </div>
        </div>
        <div style="margin-top: 300px;">
            <ul>
                <li v-for="img in images" v-bind:key=img>
                    <v-img max-width="48px" max-height="48px" v-bind:src=img />
                </li>
            </ul>
        </div>
    </div>
</template>

<style scoped>
.hex-row {
    clear: left;
}
.hex-row.even {
    margin-left: 53px;
}
ul {
  list-style: none;
}

li img {
  float: left;
  margin: 10px;
  border: 5px solid #fff;

  transition: all .3s ease;
}
</style>

<script>
import Hexagon from './Hexagon'

export default {
    data: () => ({
        images : [url, url, url...]
    }),
    components: {
        Hexagon,
    }
}
</script>

使用上面的代碼，我得到了48px * 48px的圖像，這些圖像一個接一個地排列。

我希望圖像彼此相鄰。 一旦行上沒有更多空間，該序列就在下一行繼續

Answer 1

您應該添加display:flex; flex-wrap:wrap display:flex; flex-wrap:wrap到父容器

這是使用div元素代替li的類似筆https://codepen.io/chrismclarke/pen/ExYZxbG

Answer 2

在CSS中應用以下代碼。

ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}