图像显示在页面中间侧边栏的下方，而不是从顶部显示（Vue.Js）

Question

我正在使用 Vue.JS 构建一个照片网站并遇到标题中提到的问题。我已经尝试了一切，经过两个小时的与 ChatGPT 的来回交流，我决定来到这里。

这是父组件（“MainNav”）的代码

<template>
  <div class="main_container">
    <header class="header mx-5 my-9 absolute text-xl">Gonçalo Dias</header>
    <div class="m-5 mt-80 space-y-1">
      <div
        class="sidebar-item"
        @mouseover="showInnerSidebar"
        @mouseleave="hideInnerSidebar"
      >
        Projects
        <div
          v-if="showProjectsInner"
          class="inner-sidebar space-y-0.5 mt-1 mb-2"
        >
          <div
            v-for="(project, index) in projects"
            :key="index"
            class="inner-sidebar-item indent-4"
            @click="handleProjectClick(project)"
          >
            {{ project.name }}
          </div>
        </div>
      </div>
      <div>Diary</div>
      <div>Info</div>
    </div>

    <ProjectOne
      v-if="selectedProject && selectedProject.name === 'Project 1'"
      :style="{ marginTop: selectedProject ? '10px' : '0' }"
    />
  </div>
</template>

<script>
import ProjectOne from "./ProjectOne.vue";

export default {
  components: {
    ProjectOne,
  },
  data() {
    return {
      showProjectsInner: false,
      selectedProject: null,
      projects: [{ name: "Project 1" }, { name: "Project 2" }],
    };
  },
  methods: {
    showInnerSidebar() {
      this.showProjectsInner = true;
    },
    hideInnerSidebar() {
      this.showProjectsInner = false;
    },
    handleProjectClick(project) {
      this.selectedProject = project;
      this.showProjectsInner = false;
    },
  },
};
</script>

<style lang="scss">
.header {
  top: 0;
  left: 0;
  width: 100%;
}
</style>

这是子组件的代码：

<template>
  <div>
    <div class="main_box project-image">
      <img :src="require('@/assets/Project1/001.jpg')" />
      <img :src="require('@/assets/Project1/005.jpg')" />
      <img :src="require('@/assets/Project1/022.jpg')" />
      <img :src="require('@/assets/Project1/034.jpg')" />
      <img :src="require('@/assets/Project1/036.jpg')" />
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss">
.main_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.project-image {
  max-width: 100%;
  max-height: 100vh;
  margin: 4px;
}
</style>

这就是它的样子：

我是一个初学者，所以没有想到很多解决方案，但在 Chat GPT 的帮助下，我摸索了 CSS 属性，尝试了多种变体，但没有任何东西允许我的图像破坏侧边栏容器。我的猜测是这是一个特定于 CSS 和组件之间模板关系的问题，因此这个问题与 Vue 系统有关。

Answer 1

我认为您在这段代码中使用添加

mt-80

犯了一个错误。删除它，看看会发生什么

<template>
  <div class="main_container">
    <header class="header mx-5 my-9 absolute text-xl">Gonçalo Dias</header>
    <div class="m-5 mt-80 space-y-1"> <!--in this line--!>
    ...
    </div>
  </div>
 </template>

如果不起作用请在下面评论。

Happy-Coding