基于Grid布局：实现可缩放.display-wrapper与.right-sidebar紧密相邻

核心HTML结构 #

先搭建基础DOM结构，用父容器包裹需要布局的两个子容器：

<div class="grid-container">
  <div class="display-wrapper">
    <img id="draggable-img" src="your-image-url.jpg" alt="可拖拽缩放图片">
  </div>
  <div class="right-sidebar">
    <div class="titles">
      <h2>标题区域</h2>
      <p>副标题或描述文本</p>
    </div>
    <div class="playlist">
      <h3>播放列表</h3>
      <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
      </ul>
    </div>
  </div>
</div>

Grid布局核心CSS #

通过Grid列配置实现两容器紧密相邻，同时设置基础样式：

/* 父容器：Grid布局核心配置 */
.grid-container {
  display: grid;
  /* 第一列占满剩余空间，第二列自适应内容宽度 */
  grid-template-columns: 1fr auto;
  /* 移除列间距，确保完全紧密贴合 */
  gap: 0;
  height: 100vh; /* 可选：让布局占满视口高度 */
}

/* 左侧展示容器：适配图片拖拽缩放 */
.display-wrapper {
  position: relative;
  background-color: #f5f5f5;
  overflow: hidden; /* 防止图片超出容器时出现滚动条 */
}

/* 可拖拽缩放图片基础样式 */
#draggable-img {
  position: absolute;
  cursor: move; /* 拖拽状态光标 */
  max-width: none; /* 取消默认最大宽度限制，允许缩放超出容器 */
}

/* 右侧侧边栏：自适应宽度+内部垂直布局 */
.right-sidebar {
  background-color: #e0e0e0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 200px; /* 可选：设置最小宽度避免过窄 */
}

.titles, .playlist {
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
}

图片拖拽缩放的JS实现 #

用原生JavaScript实现图片拖拽移动和滚轮缩放功能：

const img = document.getElementById('draggable-img');
let isDragging = false;
let startX, startY, initialX, initialY;

// 拖拽移动逻辑
img.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  initialX = parseFloat(getComputedStyle(img).left) || 0;
  initialY = parseFloat(getComputedStyle(img).top) || 0;
  img.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.clientX - startX;
  const dy = e.clientY - startY;
  img.style.left = `${initialX + dx}px`;
  img.style.top = `${initialY + dy}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  img.style.cursor = 'move';
});

// 滚轮缩放逻辑
img.addEventListener('wheel', (e) => {
  e.preventDefault();
  const scaleFactor = e.deltaY > 0 ? 0.9 : 1.1; // 向下滚轮缩小，向上放大
  const currentScale = parseFloat(getComputedStyle(img).transform.match(/scale\(([^)]+)\)/)?.[1] || 1);
  const newScale = Math.max(0.5, Math.min(5, currentScale * scaleFactor)); // 限制缩放范围在0.5-5倍
  img.style.transform = `scale(${newScale})`;
});

关键说明 #

1. Grid列配置：grid-template-columns: 1fr auto 让左侧容器占据所有剩余空间，右侧容器根据自身内容自适应宽度，配合gap:0确保两容器完全紧密相邻，无额外间距。
2. 图片拖拽缩放：通过绝对定位实现拖拽位移，结合鼠标事件记录坐标变化；利用CSS transform实现缩放，通过滚轮事件控制缩放比例并限制范围。
3. 侧边栏内部布局：用Flex垂直排列.titles和.playlist，确保内部元素有序分布。

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