Vue.js页面图片显示在侧边栏下方中部而非顶部的问题求助

我在用Vue.js搭建摄影网站时遇到布局异常：图片显示在侧边栏下方的中部位置，而非从页面顶部开始展示。尝试调整各类CSS属性仍未解决，特此求助。

父组件 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>

子组件 ProjectOne 代码 #

<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>

当前效果：图片展示在侧边栏下方的中部区域，未从页面顶部开始排列。

解决方案 #

问题根源 #

父组件的main_container未设置合理的布局结构，侧边栏容器使用了mt-80（Tailwind超大顶部外边距类），导致后续的ProjectOne组件被这个外边距“挤”到下方。同时所有元素处于同一流式布局，未区分侧边栏和内容区的层级。

具体修复步骤 #

1. 重构父组件布局结构
   将侧边栏和内容区域拆分为独立容器，用Flex实现并排展示：

   <template>
     <div class="main_container flex min-h-screen">
       <!-- 侧边栏容器 -->
       <div class="sidebar w-64 sticky top-0 h-screen">
         <header class="header mx-5 my-9 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>
       </div>
   
       <!-- 内容区域容器 -->
       <div class="content flex-1 p-5">
         <ProjectOne
           v-if="selectedProject && selectedProject.name === 'Project 1'"
         />
       </div>
     </div>
   </template>
   

2. 调整父组件样式
   补充Flex布局基础样式（若未使用Tailwind预设类）：

   .main_container {
     display: flex;
     min-height: 100vh;
   }
   .sidebar {
     width: 256px; /* 对应Tailwind的w-64 */
     position: sticky;
     top: 0;
     height: 100vh;
   }
   .content {
     flex: 1;
     padding: 1.25rem; /* 对应Tailwind的p-5 */
   }
   .header {
     /* 移除absolute，避免标题脱离侧边栏流 */
     width: 100%;
   }
   

3. 优化子组件样式
   修正类名冲突并调整图片布局：

   .main_box {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: flex-start;
     gap: 4px; /* 用gap替代margin，布局更稳定 */
   }
   .main_box img {
     max-width: calc(33.333% - 4px); /* 可选：设置图片列数 */
     max-height: 80vh;
     object-fit: contain; /* 保持图片比例 */
   }
   

修复原理 #

• Flex布局将侧边栏和内容区分开，内容区独立占据剩余空间，不再受侧边栏外边距影响。
• 侧边栏设置sticky固定在顶部，不干扰内容区的布局起点。
• 移除ProjectOne的marginTop样式，让内容从顶部开始排列。

内容的提问来源于stack exchange，提问作者Gonçalo Dias