CSS中多个浮动的li里的内容如何对齐

6个浮动的li里有图片和文字，但是每个li里的图片文字和旁边的无法对齐
图1是自己写的，图2是想实现的效果，请指点，谢谢啦～

img

img

提供html + css

图片用div包一下，给固定高

将图二li复制就行

img


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>
<script src="./vue.js"></script>


<body>

    <div id="app">
        <div class="main">
            <div class="list">
                <div class="model" v-for="(item,index) in list">
                    <div class="img"><img :src="'./'+item.img+'.png'" alt=""></div>
                    <div class="bottom" :style="{borderRight:(index+1)%6==0?'none':'1px solid #e6e6e6'}">
                        <!-- 动态style用来控制将每一行bottom最后一个div的又边框去掉-->
                        <div class="title">{{item.title}}</div>
                        <div class=".intro">{{item.intro}}</div>
                        <div class="price">{{item.price}}</div>
                    </div>

                </div>
            </div>

        </div>

    </div>
    <!-- 引入组件库 -->
</body>
<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                list: [{ img: "1", title: "1号商品", intro: "产品介绍", price: "￥100.00" },
                { img: "2", title: "1号商品", intro: "产品介绍", price: "￥100.00" },
                { img: "3", title: "1号商品", intro: "产品介绍", price: "￥100.00" },
                { img: "4", title: "1号商品", intro: "产品介绍", price: "￥100.00" },
                { img: "5", title: "1号商品", intro: "产品介绍", price: "￥100.00" },
                { img: "6", title: "1号商品", intro: "产品介绍", price: "￥100.00" },
                { img: "7", title: "1号商品", intro: "产品介绍", price: "￥100.00" },]
            }
        },
    })
</script>

</html>
<style>
    .list {
        border: 1px solid #e6e6e6;
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }

   /*  .list>:last-child .bottom {
        border-right: none  
    } */

    .model {
        line-height: 1.5;
        width: 16.6%;
        padding: 10px 0;
        display: flex;
        flex-direction: column;

    }

    .model .img {
        padding: 0 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 150px;
        width: 100%;
        box-sizing: border-box;
        /* 必须加 */
    }

    .model .img img {
        max-height: 100%;
        max-width: 100%;
    }

    .model .bottom {
        padding: 0 20px;
        margin-top: 10px;

    }

    .price {
        color: red;
    }
</style>

这个代码应该可以帮到你