如何实现两个并排div的第三个div精准对齐第二个div下方？

这里有两种可靠的方案，你可以根据是否能修改DOM结构来选择：

方案一：调整DOM结构（最简单直接） #

如果允许修改HTML结构，把div2和div3放到同一个容器里，div3自然就会跟在div2下方，完全对齐，不需要额外复杂的CSS：

<div class="row">
  <div class="div1">
    <p> some content with unknown width</p>
  </div>
  <!-- 新增容器包裹div2和div3 -->
  <div class="div2-group">
    <div class="div2">
      <p> some content </p>
    </div>
    <div class="div3">
      <p> some content that should be under div2 </p>
    </div>
  </div>
</div>

CSS保留原来的基础样式即可：

.row { display: flex; }
.div1 { margin-right: 1em; }

这个方案逻辑清晰，兼容性好，不需要担心复杂布局的适配问题。

方案二：不修改DOM结构，用CSS Grid实现 #

如果不能调整HTML结构，CSS Grid是最佳选择，它能精准控制元素位置，完美适配div1的动态宽度：

首先给row和div3外面加一个网格容器（建议用独立容器更规范）：

<div class="layout-container">
  <div class="row">
    <div class="div1">
      <p> some content with unknown width</p>
    </div>
    <div class="div2">
      <p> some content </p>
    </div>
  </div>
  <div class="div3">
    <p> some content that should be under div2 </p>
  </div>
</div>

然后编写Grid相关的CSS：

.layout-container {
  display: grid;
  /* 第一列自适应div1的宽度，第二列占满剩余空间 */
  grid-template-columns: auto 1fr;
  /* 列之间的间距替代原来div1的margin-right */
  column-gap: 1em;
}

/* 让row的子元素直接成为网格的子项，忽略row本身的容器 */
.row {
  display: contents;
}

/* 移除div1原来的margin-right，改用网格的列间距 */
.div1 {
  margin-right: 0;
}

/* 指定div3放在第二列，和div2同列 */
.div3 {
  grid-column: 2;
}

为什么你之前的方法没用？ #

• 设置margin-left：因为div1的宽度是动态的，你无法提前确定需要设置的margin值，所以没法精准对齐；
• 右浮动：float:right只会让div3靠右侧对齐，而不是对齐div2的左侧起始位置，自然达不到需求。

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