如何防止Details元素展开时导致相邻Div移位？

首先纠正你的HTML结构错误：当前#right是嵌套在#left内部的子元素，这会导致它的布局完全受#left高度变化影响。先把#right移到#left外面，作为同级元素放在同一个父容器中，才能实现正常的左右并排布局。

接下来，通过以下几种方式可以完全避免右侧图片随左侧展开下移的问题：

方法1：Flex布局（推荐） #

利用Flex布局的align-items: flex-start属性，让右侧容器始终对齐顶部，不受左侧高度变化影响。

修正后的HTML： #

<div class="container">
  <div id="left">
    <details>
      <summary>lorem</summary>
      <p class="general-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.</p>
    </details>
    <details>
      <summary>lorem</summary>
      <p class="general-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.</p>
    </details>
    <details>
      <summary>lorem</summary>
      <p class="general-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.</p>
    </details>
    <details>
      <summary>lorem</summary>
      <p class="general-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.</p>
    </details>
  </div>
  <div id="right">
    <picture id="image-container">
      <img src="Resources/Images/myImage.jpg" alt="">
    </picture>
  </div>
</div>

对应的CSS： #

.container {
  display: flex;
  align-items: flex-start; /* 核心：让子元素垂直对齐顶部 */
  gap: 20px; /* 可选：设置左右容器的间距 */
}

#left {
  flex: 1; /* 可选：让左侧容器占据剩余可用空间 */
}

#right {
  flex-shrink: 0; /* 可选：防止右侧图片容器被压缩 */
}

方法2：Grid布局 #

用Grid划分两列，通过align-items: start固定右侧元素的垂直位置。

CSS代码： #

.container {
  display: grid;
  grid-template-columns: 1fr auto; /* 左侧自适应宽度，右侧按内容宽度 */
  align-items: start;
  gap: 20px;
}

方法3：传统inline-block布局 #

如果不使用现代布局方案，也可以通过inline-block配合vertical-align: top实现：

CSS代码： #

#left, #right {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px; /* 可选：设置间距 */
}

以上三种方法的核心逻辑都是让右侧元素的垂直对齐点固定在顶部，这样无论左侧容器因展开details产生高度变化，右侧图片都不会发生偏移。

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