重新创建 Google 图片布局

Question

我想重新创建谷歌页面结果的布局

当您单击图像时，一个 div 占据屏幕的整个宽度，并在单击的图像底部显示一个小三角形

A 试图将 img 放在另一个 div 中，但 div 位于两个图像之间而不是在一行之下，因此布局非常糟糕

我试过这个

<template>
  <div>
    <div v-for="(item,index) in AllItem" :key="index">
      <img :src="item.profile_image_url" @click.prevent.stop="clickShowInfoStream()" />
      <div v-show="imgXL">
        <img :src="profile_image_urlXL" class="imgProfileXL" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "item",
  data() {
    return {
      imgXL: false
    };
  },
  methods: {
    clickShowImgXL() {
      this.imgXL = !this.imgXL;
    }
  }
};
</script>

<style scoped>
.imgProfileXL {
  background-color: #19171c;
  width: 100%;
}
</style>

我希望，当您单击 img 时，div 会平滑地显示两行之间更大的图像，例如 google 搜索布局，并且当您单击“无”时，单击的图像也会有一个小三角形，div 关闭

Answer 1

使用 css position:absulote 从当前<div v-show="imgXL"> <img :src="profile_image_urlXL" class="imgProfileXL" /> </div> layout 中获取<div v-show="imgXL"> <img :src="profile_image_urlXL" class="imgProfileXL" /> </div>的代码，这样就可以了不影响你的布局。