Question

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

点击图片时，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时，顺利显示div，就像在Google seach布局中那样，两行之间的图像较大，并且当您单击“无” div时，关闭的图像也会出现一个小三角形

Answer 1

使用css position：absulote从当前的div-layout中获取<div v-show="imgXL"> <img :src="profile_image_urlXL" class="imgProfileXL" /> </div>的代码，因此不会影响您的布局。

重新创建Google图片布局

1 个答案: