左右两个,左边上下,右边图片

1)先上效果图

image.png

2)代码块

<template>
    <div class="mystar">
        <div class="list">
            <div class="item">
                <div class="info">
                    <div class="title">
                        内容去啊大撒大撒大撒阿三打撒收阿斯顿奥收啊
                    </div>
                    <div class="bottom"> 
                        <span> 我爸是李刚 </span> 
                        <span> 52 </span> 
                    </div>
                </div>
                <img src="../assets/gougou.jpg" />
            </div>
        </div>
    </div>
</template>

<script>
</script>

<style lang="less" scoped>
    .item{
        padding: 10px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        .info{
            flex: 1; // 让所有的盒子下的元素都有相同的长度
            //设置两个div上下
            display: flex;  //使用flex布局
            flex-direction: column;  // 使用竖直方向
            justify-content: space-between; //改成竖直排列
            .title{
                font-size: 16px;
            }
            .bottom{
                font-size: 12px;
                color: #ccc;
                span{
                    margin-right: 12px;
                }
            }
        }
        img{
            width: 120px;
            height: 80px;
            display: block;
            object-fit: cover;  //定义长宽后可以等比例放置
        }
    }
</style>

总结

1.object-fit: cover; 属性值表示可以让图片等比例放置，防失真。
2.希望此教程可以帮助到你们。❤❤❤