一个经过思考的页面布局

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/belove_lucy/article/details/85250991

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

页面要求:动态页面,所有人物图片、文字介绍皆可从后台上传
在这里插入图片描述

我的问题:
文字字数部分是没有限制的,比如能力这个字段,如果它有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来撑起来高度

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

展开阅读全文

没有更多推荐了,返回首页