自适应 panel 小 demo

最新推荐文章于 2020-12-09 08:53:47 发布

洪海洋

最新推荐文章于 2020-12-09 08:53:47 发布

阅读量593

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/afr3828/article/details/80322095

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html（宽度是百分比）:

 
  <div class="panel-out"> 
 
    <div class="panel-main"> 
 
      <div class="logo-content"> 
 
      </div> 
 
      <div class="panel-content"> 
 
      </div> 
 
    </div> 
 
  </div>

css:

CSS margin 和 padding 属性的垂直方向的百分比值都是相对于宽度计算的

 
  .panel-out { 
 
    padding: 10px; 
 
    border-bottom: 1px solid rgb(236, 236, 236); 
 
    box-sizing: border-box; 
 
    background-color: white; 
 
  } 
 
  .panel-main { 
 
    position: relative; 
 
    padding-left: 25%; 
 
    padding-bottom: 25%; 
 
    border: 1px solid red; 
 
  } 
 
  .logo-content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 25%; 
 
    height: 100%; 
 
    background-color: lightgray; 
 
  } 
 
  .panel-content { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 75%; 
 
    height: 100%; 
 
    background-color: gray; 
 
  }

panel-vue 组件（宽度是固定的数值）:

 
  <template> 
 
      <div class="panel-out"> 
 
          <div class="panel-main"> 
 
              <div class="user-avatar-panel" :style="{'background-image':'url('+ avatar +')'}"></div> 
 
              <div class="info-content"> 
 
                  <div class="long-text">{{name}}</div> 
 
                  <div class="company long-text">{{company}}</div> 
 
                  <!-- <div v-if="desc" class="company long-text">{{desc}}</div> --> 
 
              </div> 
 
          </div> 
 
          <div v-if="desc" class="desc">{{desc}}</div> 
 
      </div> 
 
  </template> 
 
  <script> 
 
      export default { 
 
          name: "user-info-panel", 
 
          props: ['name', 'company', 'desc', 'avatar'], 
 
          data() { 
 
              return { 
 
              }; 
 
          }, 
 
          computed: {}, 
 
          methods: {}, 
 
          components: {} 
 
      } 
 
  </script> 
 
  <style scoped> 
 
      .panel-out { 
 
          /* height: 100px; */ 
 
          padding: 10px; 
 
          border-bottom: 1px solid rgb(236, 236, 236); 
 
          box-sizing: border-box; 
 
          background-color: white; 
 
      } 
 
      .panel-main { 
 
          position: relative; 
 
          padding-left: 60px; 
 
      } 
 
      .user-avatar-panel { 
 
          position: absolute; 
 
          top: 0; 
 
          left: 0; 
 
          width: 60px; 
 
          height: 60px; 
 
          background-position: center; 
 
          background-size: cover; 
 
          border-radius: 50%; 
 
      } 
 
      .info-content { 
 
          height: 60px;         
 
          box-sizing: border-box; 
 
          margin-left: 5%; 
 
      } 
 
      .info-content div{ 
 
          line-height: 30px; 
 
      } 
 
      .company { 
 
          color: rgb(148, 143, 143); 
 
          font-size: 15px; 
 
      } 
 
      .long-text{ 
 
          text-overflow: ellipsis; 
 
          white-space: nowrap; 
 
          overflow: hidden; 
 
      } 
 
      .desc{ 
 
          color: rgb(148, 143, 143);         
 
      } 
 
  </style>