uniapp前端实现左文字右图片的样式

实现结果：实现做文字有图片的样式

实现思路： 左右两个盒子div的方式实现

实现代码

<template>
    <view>
        <view class="menb">
            <view class="mena">
                <p>标题我们的测试的数据在位累的时候我们开始测试阿胶覅额我见过i忘记鹅公文件覅哦额外加工</p>
                <p>作者:小宝</p>
            </view>
            <view class="menc">
                <img src="static/images/classify2.jpg" alt="" />
            </view>
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
     
    };
  },
  methods: {
    
  },
};
</script>

<style scoped>
/* page{
     background: #f0f0f0;
 } */
  .mena{
      font-size: 32rpx;
      flex: 1;
      position: relative;
  }
  .mena p:nth-child(2){
      position: absolute;
      bottom:10rpx;
  }
  .mena p:nth-child(1){
      display: -webkit-box;
      -webkit-line-clamp: 2;  /* 移出几行生效影藏的效果 */
      -webkit-box-orient: vertical;
      /* !autoprefixer: off */
      overflow: hidden;
      /* !autoprefixer: on */
  }
  .menb{
      background: #F0C674;
      height: 150rpx;
      display: flex;
  }
  img{
      width: 100%;
      height: 100%;
  }
  .menc{
      width: 150rpx;
      height: 150rpx;
  }
</style>