百分比布局和layout栅格布局

先看百分比布局的问题
问题一：当某个块儿元素和其他的不同时，比如这个是多了单行缩进，导致其占比超过了本来的四分之一

问题二：当某个页面元素不是四个的时候，也会导致占比不一致


然后附百分比布局代码

 <ul class="itemWrap">
          <li
            v-for="ite in item.list.slice(
              (currentNum - 1) * pageSize,
              currentNum * pageSize
            )"
            :key="ite.num"
            class="itemBox"
          >
            <el-card :body-style="{ padding: '0px' }">
              <div class="image">
                <img
                  src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                  class=""
                />
                <div v-if="true" class="time">距离开始2小时</div>
              </div>
              <div class="detail">
                <div class="describe">{{ ite.desc }}</div>
                <div class="bottom">
                  <el-tag effect="dark" class="clickTab">
                    {{ ite.state }}
                  </el-tag>
                  <span v-if="true">预约人数:{{ ite.num }}</span>
                  <span v-else>火爆预约中</span>
                </div>
              </div>
            </el-card>
          </li>
        </ul>

//style
.itemWrap {
    list-style: none;
    display: flex;
    .itemBox {
      animation: fadeinR 1.5s linear;
      margin-right: 15px;
      width: 25%;
      //   flex: 1;
      &:last-child {
        margin-right: 0px;
      }
      &:hover {
        transform: translateY(-10px);
      }
      .image {
        text-align: center;
        position: relative;
        // padding-top: 15px;
        img {
          width: 100%;
        }
        .time {
          position: absolute;
          left: 20px;
          bottom: 10px;
        }
      }
      .detail {
        .describe {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          //   width: 80%;
          padding: 0 10px 20px 10px;
        }
        .bottom {
          padding: 0 10px 15px 10px;
          display: flex;
          justify-content: space-between;
          .clickTab {
            cursor: pointer;
          }
        }
      }
    }
  }      

再来看layout栅格布局的效果
解决第一个问题

解决第二个问题


附上layout栅格布局代码

 <el-row :gutter="20" class="itemWrap">
          <el-col
            v-for="ite in item.list.slice(
              (currentNum - 1) * pageSize,
              currentNum * pageSize
            )"
            :key="ite.num"
            :span="6"
            class="itemBox"
          >
            <el-card :body-style="{ padding: '0px' }">
              <div class="image">
                <img
                  src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                  class=""
                />
                <div v-if="true" class="time">距离开始2小时</div>
              </div>

              <div class="detail">
                <div class="describe">{{ ite.desc }}</div>
                <div class="bottom">
                  <el-tag effect="dark" class="clickTab">
                    {{ ite.state }}
                  </el-tag>
                  <span v-if="true">预约人数:{{ ite.num }}</span>
                  <span v-else>火爆预约中</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

//style
.itemWrap {
    .itemBox {
      animation: fadeinR 1.5s linear;
      &:hover {
        transform: translateY(-10px);
      }
      .image {
        text-align: center;
        position: relative;
        img {
          width: 100%;
        }
        .time {
          position: absolute;
          left: 20px;
          bottom: 10px;
        }
      }
      .detail {
        .describe {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 10px 20px 10px;
        }
        .bottom {
          padding: 0 10px 15px 10px;
          display: flex;
          justify-content: space-between;
          .clickTab {
            cursor: pointer;
          }
        }
      }
    }
  }