css列表排版

Question

css列表排版

发布于
2019-08-06

想要达到每一行图片宽度一样，间距也是一样的，请问需要怎么写啊？

html结构

 <div
    v-for="item in list.data"
    :key="item.key"
    @click="handleToDetail(item)"
    class="list"
  >
    <div class="list__box">
      <div class="list__box__img">
        <img :src="item.img" alt="">
      </div>
      <div class="info">
        <div class="info__title">{{ item.name }}</div>
        <div class="info__author"><van-icon name="manager"/>{{ item.desc }}</div>
      </div>
    </div>
  </div>

css

.list {
  display inline-block
  width 33.3%
  height 24vh
  margin-top 8px
  &__box {
    height 100%
    width 90%
    margin 0 auto
    &__img {
      height 70%
      background-color #fff
      border 1px solid #ccc
      img {
        width 100%
        height 100%
      }
    }
  }
    .info {
      height 30%
      &__title {
        width 100%
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
        text-indent 1em
        line-height 2em
        font-size 14px
        color #000
        margin-top: 4px
      }
      &__author {
        text-align right
        margin-right 8px
        .van-icon {
          vertical-align -1px
          margin-right 8px
        }
      }
    }
  }