3.1.1.1 左侧自适应,右侧自适应布局.md

左侧自适应,右侧自适应布局

<div class="common-wrap__currentTag inline-block">
      <a :href="'#/'+tagLibName+'Lib'" class="common-wrap__currentTag__name">全部</a>
      <i class="el-icon-arrow-right m-l-8 m-r-8"></i>
      <template v-for="(item,index) in currentTagDatas">
        <a :href="'#/'+tagLibName+'List?id='+item.id" class="common-wrap__currentTag__name">{{item.name}}</a>
        <i class="el-icon-arrow-right m-l-8 m-r-8" v-if="currentTagDatas.length-1 != index"></i>
      </template>
    </div>
    <div class="common-wrap__childTag inline-block">
      <template v-for="(item,index) in childTagDatas">
        <a href="" class="common-wrap__childTag__name">{{item.name}}</a>
      </template>
    </div>



.common-wrap__cateTags {
  position: relative;
  width: 100%;
  height: 45px;
  margin-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}

.common-wrap__cateTags .common-wrap__currentTag {
  white-space: nowrap;
  font-size: 0;
  color: #303133;
}

.common-wrap__currentTag .common-wrap__currentTag__name {
  font-size: 14px;
  color: #303133;
  font-weight: 700;
}

.common-wrap__currentTag i {
  font-size: 14px;
  color: #909399;
}

.common-wrap__cateTags .common-wrap__childTag {
  /*max-width: calc(100% - 280px);*/
  vertical-align: middle;
  margin-left: 6px;
  padding-left: 10px;
  font-size: 14px;
  color: #606266;
  border-left: 1px solid #979797;
  white-space: nowrap;
  overflow: hidden;
  /*text-overflow: ellipsis;*/
}

.common-wrap__childTag .common-wrap__childTag__name{
  margin-right: 10px;
  padding: 2px 5px;
  font-size: 14px;
  color: #606266;
  background: #F0F2F5;
  border-radius: 2px;
}

参考