如何用CSS实现单个Div与下方三个并列Div的对齐及宽度匹配？

直接调整现有代码就能实现你的两个需求，下面是修改后的完整代码和关键说明：

完整代码 #

CSS 部分 #

/* 全局设置，让元素宽度计算更直观 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  /* 计算下方三个box的总宽度：3个300px宽的box + 2个20px的间距 */
  max-width: calc(3 * 300px + 2 * 20px);
  margin: 20px auto; /* 让整个容器居中显示 */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 控制上下两行的间距，替代margin-top */
}

.inner-container {
  display: flex;
  gap: 20px; /* 控制三个box之间的间距，避免margin重叠问题 */
}

.box {
  width: 300px;
  background-color: #ccc;
  padding: 20px;
  border-radius: 10px;
}

/* 上方标题行的样式 */
.top-box {
  padding: 10px 0; /* 上下内边距按需调整，左右去掉内边距方便图片对齐 */
}

.title-img {
  display: block;
  /* 图片左边缘和下方最左侧box的外边缘对齐 */
}

HTML 部分 #

<div class="container">
  <div class="box top-box">
    <img src="你的图片地址" alt="标题图片" class="title-img">
    <p>This is the first div.</p>
  </div>
  <div class="inner-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

关键修改说明 #

• 宽度匹配：给.container设置max-width为三个box的总宽度（3300px + 220px间距），让上方的.top-box宽度默认占满容器，自然和下方三个box的总宽度一致。
• 图片对齐：去掉.top-box的左右内边距，让图片的左边缘和容器左边缘对齐，也就和下方最左侧box的外边缘完全对齐了。
• 简化间距：用gap替代margin控制元素间距，避免flex布局中margin重叠的问题，代码更简洁。

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