如何实现图片与滚动框并排并给滚动框添加顶部标题？

以下是一套适合基础HTML/CSS水平的实现方案，完全从零开始搭建，同时兼顾移动端适配：

1. HTML结构 #

先搭建核心布局结构，用容器包裹图片和滚动框区域，滚动框内拆分标题和内容区：

<div class="content-container">
  <div class="image-wrapper">
    <img src="你的图片地址" alt="图片描述文本">
  </div>
  <div class="scroll-box-container">
    <h3 class="scroll-title">滚动框标题</h3>
    <div class="scroll-content">
      <!-- 填充需要滚动的内容 -->
      <p>示例内容行1</p>
      <p>示例内容行2</p>
      <p>示例内容行3</p>
      <p>示例内容行4</p>
      <p>示例内容行5</p>
      <p>示例内容行6</p>
      <p>示例内容行7</p>
      <p>示例内容行8</p>
      <p>示例内容行9</p>
      <p>示例内容行10</p>
    </div>
  </div>
</div>

2. CSS样式实现 #

用Flex布局实现并排，同时设置滚动逻辑和基础样式：

/* 基础重置：消除默认边距，统一盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 外层容器：实现图片和滚动框并排 */
.content-container {
  display: flex;
  gap: 20px; /* 图片与滚动框的间距，可调整 */
  padding: 20px;
  max-width: 1200px; /* 限制最大宽度，避免大屏幕布局过散 */
  margin: 0 auto; /* 水平居中 */
}

/* 图片容器：保证图片比例正确 */
.image-wrapper img {
  width: 100%;
  max-width: 400px; /* 限制图片最大宽度，可按需修改 */
  height: auto;
  object-fit: cover; /* 保持图片比例，防止拉伸变形 */
}

/* 滚动框容器：占满剩余空间，内部垂直排列标题和内容 */
.scroll-box-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 滚动框标题：单独设置样式 */
.scroll-title {
  padding: 10px 15px;
  background-color: #f0f0f0; /* 标题背景色，可自定义 */
  border-bottom: 1px solid #ddd;
}

/* 滚动内容区：实现纵向滚动 */
.scroll-content {
  flex: 1;
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  padding: 15px;
  border: 1px solid #ddd;
  border-top: none; /* 和标题下边框合并，避免重复线条 */
}

3. 移动端适配 #

添加媒体查询，小屏幕上自动切换为上下布局：

/* 屏幕宽度小于768px时生效 */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column; /* 切换为垂直排列 */
  }
  
  .image-wrapper img {
    max-width: 100%; /* 图片占满屏幕宽度 */
  }
}

可选调整提示 #

• 可根据需求修改gap、padding、颜色值、图片最大宽度等参数，匹配设计风格。
• Flex布局默认会让滚动框高度与图片自动对齐，此时滚动内容区高度和图片同步，内容超出自动触发滚动。

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