构建项目页两列网格遇布局问题：点击显示内容后右列下移

我看了你遇到的布局问题——点击封面图展开内容后，右侧列直接跑到了左侧列的下方，这确实是Flex布局里很容易踩的小坑。咱们一步步拆解问题，搞定它：

问题根源分析 #

你当前的布局错乱，大概率是因为这两个原因之一：

1. 展开的内容被错误地放在了Flex容器的外部，破坏了原本的两列结构；
2. Flex容器的flex-wrap属性被设置为wrap，当左侧列高度增加时，容器宽度被挤压触发了换行，把右侧列挤到了下方。

针对性解决方案 #

方案1：让展开内容属于左侧列的一部分（符合你“封面图区域保持原位”的需求） #

这个方案下，封面图和展开内容都属于左侧列的子元素，点击展开时左侧列高度自然延伸，右侧列会始终和左侧列顶部对齐，不会换行。

修改后的HTML结构

<div class="grid-container">
  <!-- 左侧列：包含封面图+标题+展开内容 -->
  <div class="left-column">
    <a href="#" class="toggle">
      <img src="你的封面图地址" alt="项目封面">
      <h2>项目标题</h2>
    </a>
    <!-- 默认隐藏的展开内容 -->
    <div class="hidden-content">
      <p>这里是点击后展开的详细内容...</p>
    </div>
  </div>
  <!-- 右侧列：保持原位 -->
  <div class="right-column">
    <p>右侧列的固定内容...</p>
  </div>
</div>

配套CSS设置

.grid-container {
  display: flex;
  flex-wrap: nowrap; /* 强制两列不换行，这是关键！ */
  gap: 20px; /* 可选：给两列加个间距 */
  width: 100%; /* 确保容器占满可用宽度 */
}

.left-column, .right-column {
  flex: 1; /* 让两列平分容器宽度，也可以设置固定宽度比如width: 50% */
}

/* 初始隐藏展开内容 */
.hidden-content {
  display: none;
  margin-top: 15px;
}

/* 点击后显示内容的类 */
.hidden-content.active {
  display: block;
}

JS逻辑保留你的toggle功能

只需要在点击时给.hidden-content添加/移除active类即可，不用修改原有逻辑。

方案2：展开内容在整个网格下方（如果需求是内容全屏展开） #

如果你的需求是展开内容要铺满整个页面宽度，在两列网格的下方显示，那可以把展开内容放在Flex容器外面：

修改后的HTML结构

<div class="grid-container">
  <div class="left-column">
    <a href="#" class="toggle">
      <img src="你的封面图地址" alt="项目封面">
      <h2>项目标题</h2>
    </a>
  </div>
  <div class="right-column">
    <p>右侧列的固定内容...</p>
  </div>
</div>
<!-- 展开内容放在网格容器外面 -->
<div class="hidden-content">
  <p>这里是点击后展开的全屏详细内容...</p>
</div>

配套CSS设置

.grid-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: 100%;
}

.left-column, .right-column {
  flex: 1;
}

.hidden-content {
  display: none;
  width: 100%;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.hidden-content.active {
  display: block;
}

关键注意事项 #

• 确保Flex容器的宽度足够容纳两列（比如设置width: 100%），避免因为宽度不足触发换行；
• 不要给Flex子项加float属性，会直接干扰Flex布局的正常工作；
• 如果用flex: 1分配宽度，不要给子项设置固定宽度，否则可能导致溢出。

按照上面的方案调整后，点击封面图展开内容时，右侧列会始终保持在原位，不会出现下移的问题啦～

内容的提问来源于stack exchange，提问作者Chris