css list布局高端玩法

qq_278063712024-07-21 17:08

这种布局方式通常父级item 使用display:flex; 子集list使用margin-right margin-bottom撑开距离然后得纠结最后一个子集的margin什么的

有个新思路子集使用padding

css 复制代码

      <div class="video-box">

        <div class="video-list" v-for="item in videoList.list" :key="item.video_id">
          <div class="video-list-cont">
            <el-checkbox v-model="item.checked" class="c1"></el-checkbox>
            <div class="video-img-wrap">
              <img :src="item.video_cover_url" alt="" class="video-img" />
            </div>
            <div class="d1">
              <span class="s1">{{ item.width }}x{{ item.height }}</span>
              <span class="s2">{{ item.duration }}</span>
            </div>
          </div>
          <div class="video-footer">{{ item.file_name }}</div>
        </div>

      </div>

.video-footer{ font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.video-list-cont .s1,.video-list-cont .s2{ padding: 0 6px; background: rgba(0,0,0,.6); color: #fff; border: 1px solid hsla(0,0%,100%,.5); border-radius: 8px;}
.video-list-cont .d1 .s2{ margin-left: 4px;}
.video-list-cont .d1{ position: absolute; bottom: 4px; left: 0; display: flex; width: 100%; justify-content: center;}
.video-list .c1{ position: absolute; top: 8px; right: 8px;}
.video-img{ width: 100%; height: 100%;}
.video-img-wrap{ width: auto; height: 174px;}
.video-list-cont{ position: relative; display: flex; justify-content: center; background: #f2f2f2; font-size: 12px; cursor: pointer; border-radius: 4px;}
.video-list{ padding: 6px; width: 20%; box-sizing: border-box;}
.video-box{ padding: 0 10px; display: flex; flex-wrap: wrap;}

css list布局 高端玩法

css list布局高端玩法