一个经过思考的页面布局

页面内容应有版权关系我就随便拿一张图和文字代替了

页面要求：动态页面，所有人物图片、文字介绍皆可从后台上传

我的问题：
文字字数部分是没有限制的，比如能力这个字段，如果它有5行，就说明它的文字需要围绕图片布局，这就造成了文字展示的宽度会有两种宽度，又因为是动态，不能写死，能不能规范的布局，就看你的页面够不够聪明

我的解决方法：

		<div class="introduce-content">
          <div class="person_info_part">
            <div class="people_pic_part"></div>
            <p class="person_name_cv"><span class="person_name">花花</span>&nbsp;&nbsp;<span class="person_cv">CV:Marse</span></p>
            <p class="person_sex_age_height"><span class="person_sex">性别:男</span>&nbsp;&nbsp;<span class="person_age">年纪:5岁</span>&nbsp;&nbsp;<span class="person_height">身高:30CM</span></p>
            <p class="person_identity_all"><span class="person_identity">身份:同事Bella家的一只大胖猫*************</span></p>
            <p><span class="person_character">性格:粘人，性格偏内向。</span></p>
            <p><span class="person_power">能力:！#@¥#%¥……%&…………%%#%¥%#@#¥#@¥#%¥%。</span></p>
            <p>人物简介:<p>
            <p class="person_detail">年少时家道中落，转而被我同事Bella收养，当然同时收养的还有他的弟弟Marse。啦啦啦啦啦</span></p>
            <p class="person_else">啦啦啦啦啦啦啦啦啦啊啦啦啦啦阿拉啦。</p>
          </div>
        </div>

css代码：

	.introduce-content {
      width: 100%;
      height: auto;
      min-height: 300px;
      overflow: hidden;
      background: url('../images/people/content_back.png') no-repeat;
      background-size: 100% 100%;
      color: white;
      font-size: 0.9em;
      &:before {
        content:'';
        background: url('../images/test.jpeg');
        background-size: 385px 412.5px;
        position: absolute;
        width: 385px;
        height: 412.5px;
        z-index: 10;
        top: 90px;
        right: 15px;
      }
      .person_info_part {
        width: 84%;
        height: auto;
        min-height: 300px;
        left: 8%;
        position: absolute;
        z-index: 999;
        padding: 20px 10px;
        padding-bottom: 40px;
        .people_pic_part {
          width: 220px;
          height: 300px;
          overflow: hidden;
          float: right;
        }
        p {
          color: #4b658d;
          text-align: justify;
          padding-right: 10px;
          font-size: 1em;
        }
        .person_name_cv {
          padding-top: 10px;
          font-size: 1.3em;
          color: #fff;
          margin: 0;
          padding: 0;
          .person_name {
            font-size: 1.6em;
          }
        }
        .person_sex_age_height {
          padding: 10px 0px;
          font-size: 1.1em;
          margin: 0;
          padding: 0;
          color: #fff;
        }
        .person_identity_all {
          &:before {
            content: '';
            height: 2px;
            width: calc(~"100% - 220px");
            background-color: white;
            display: block;
            margin-bottom: 0.8em;
            margin-top: -0.5em;
          }
        }
        .other_person {
          width: 100%;
          height: auto;
          overflow-x: scroll;
          .other_person_item {
            width: calc(~"300% / 15");
            height: auto;
            float: left;
            margin-right: calc(~"75% / 15");
            img {
              width: 100%;
            }
          }
        }
      }
    }

js 代码：

	fitHeight() {
      // 背景图片高度自适应 js实现
      var info_height = $('.person_info_part')[0].offsetHeight;
      $('.introduce-content')[0].style.height = info_height + "px";
    }

原理：

• 页面文字的背景在最大div的css种设置背景，背景可随着高度拉抻，有因为背景的特殊性，只有上下边有花边，所以高度增加，对背景影响不大
• 人物图片设置在背景div的伪类中，绝对定位调整好位子
• 因为人物图片是绝对定位，那么如果希望文字与图片的交界处是文字在上，则需要在大div上再覆一层div，并且绝对定位
• 现在解决人物图片上不能有文字完全遮住，只遮住边缘的问题。设一个div，设置成你想要的大小，float在整体的右边就好了，这样文字就可以绕着图片走，但绕着的范围可以有你来决定
• 文字动态加载，需要js来撑起来高度

没啦没啦。。。。如果有其他简单的解决办法，请执教。。。这种实在太麻烦啦，谢谢?